@ably/ui 17.7.1 → 17.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/core/Accordion.js +1 -1
  2. package/core/Accordion.js.map +1 -1
  3. package/core/Badge.js +1 -1
  4. package/core/Badge.js.map +1 -1
  5. package/core/CodeSnippet/PlainCodeView.js +1 -1
  6. package/core/CodeSnippet/PlainCodeView.js.map +1 -1
  7. package/core/CodeSnippet/TooltipButton.js +1 -1
  8. package/core/CodeSnippet/TooltipButton.js.map +1 -1
  9. package/core/CodeSnippet/languages.js +1 -1
  10. package/core/CodeSnippet/languages.js.map +1 -1
  11. package/core/CodeSnippet.js +1 -1
  12. package/core/CodeSnippet.js.map +1 -1
  13. package/core/ConnectStateWrapper.js.map +1 -1
  14. package/core/CookieMessage.js +1 -1
  15. package/core/CookieMessage.js.map +1 -1
  16. package/core/DropdownMenu.js +1 -1
  17. package/core/DropdownMenu.js.map +1 -1
  18. package/core/Expander.js +1 -1
  19. package/core/Expander.js.map +1 -1
  20. package/core/FeaturedLink.js +1 -1
  21. package/core/FeaturedLink.js.map +1 -1
  22. package/core/Flash.js +1 -1
  23. package/core/Flash.js.map +1 -1
  24. package/core/Header/HeaderLinks.js +1 -1
  25. package/core/Header/HeaderLinks.js.map +1 -1
  26. package/core/Header.js +1 -1
  27. package/core/Header.js.map +1 -1
  28. package/core/Icon/components/icon-display-ui-mono.js +2 -0
  29. package/core/Icon/components/icon-display-ui-mono.js.map +1 -0
  30. package/core/Icon/components/icon-display-ui.js +2 -0
  31. package/core/Icon/components/icon-display-ui.js.map +1 -0
  32. package/core/Icon/components/index.js +1 -1
  33. package/core/Icon/components/index.js.map +1 -1
  34. package/core/Icon/computed-icons/display-icons.js +1 -1
  35. package/core/Icon/computed-icons/display-icons.js.map +1 -1
  36. package/core/Icon.js +1 -1
  37. package/core/Icon.js.map +1 -1
  38. package/core/LinkButton.js +1 -1
  39. package/core/LinkButton.js.map +1 -1
  40. package/core/Pricing/PricingCards.js +1 -1
  41. package/core/Pricing/PricingCards.js.map +1 -1
  42. package/core/ProductTile.js +1 -1
  43. package/core/ProductTile.js.map +1 -1
  44. package/core/Slider.js +1 -1
  45. package/core/Slider.js.map +1 -1
  46. package/core/Table/data.js +1 -1
  47. package/core/Table/data.js.map +1 -1
  48. package/core/icons/display/icon-display-ui-mono.svg +22 -0
  49. package/core/icons/display/icon-display-ui.svg +22 -0
  50. package/core/sprites-display.svg +1 -1
  51. package/index.d.ts +27 -3
  52. package/package.json +11 -8
package/core/Accordion.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useMemo,useState,forwardRef,useEffect}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none":true,"px-4 mb-4 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:typeof rowIcon==="object"?rowIcon.name:rowIcon,color:textClass,additionalCSS:typeof rowIcon==="object"&&rowIcon.css?rowIcon.css:"",size:options?.rowIconSize??"32px"}):null,React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-4"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[options?.defaultOpenIndexes,options?.fullyOpen,data.length]);const[openRowValues,setOpenRowValues]=useState(openIndexes);useEffect(()=>{setOpenRowValues(openIndexes)},[openIndexes]);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,value:openRowValues[0],onValueChange:values=>setOpenRowValues([values])},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",value:openRowValues,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
1
+ import React,{useMemo,useState,forwardRef,useEffect}from"react";import{AccordionContent,AccordionItem,AccordionTrigger,Accordion as RadixAccordion}from"@radix-ui/react-accordion";import Icon from"./Icon";import{themeClasses,isNonTransparentTheme,isStaticTheme}from"./Accordion/utils";import cn from"./utils/cn";const AccordionRow=({name,children,rowIcon,options,toggleIcons,theme,index,onClick,openRowValues,rowInteractive=true})=>{const{selectable,sticky}=options||{};const rowKey=`accordion-item-${index}`;const isOpen=openRowValues.includes(rowKey);const{text,bg,hoverBg,selectableBg,selectableText,border,toggleIconColor}=themeClasses[theme];const textClass=selectable&&isOpen&&selectableText||text;return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders})},React.createElement(AccordionTrigger,{onClick:onClick,className:cn({"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none":true,"px-4 mb-4 rounded-lg":isNonTransparentTheme(theme),"px-0 rounded-none":!isNonTransparentTheme(theme),"pointer-events-none focus-visible:outline-none":isStaticTheme(theme),"focus-base":!isStaticTheme(theme),"sticky top-0":sticky,[`${bg} ${hoverBg} ${text}`]:!(selectable&&isOpen),[`${selectableBg} ${selectableText}`]:selectable&&isOpen,[options?.headerCSS??""]:options?.headerCSS,[options?.selectedHeaderCSS??""]:options?.selectedHeaderCSS&&isOpen})},rowIcon?React.createElement(Icon,{name:typeof rowIcon==="object"?rowIcon.name:rowIcon,color:textClass,additionalCSS:typeof rowIcon==="object"&&rowIcon.css?rowIcon.css:"",size:options?.rowIconSize??"32px"}):null,React.createElement("span",null,name),!selectable&&!isStaticTheme(theme)&&rowInteractive?React.createElement("span",{className:"flex-1 justify-end flex items-center"},React.createElement(Icon,{name:isOpen?toggleIcons.open.name:toggleIcons.closed.name,color:toggleIconColor,size:options?.iconSize??"16px"})):null),rowInteractive&&React.createElement(AccordionContent,{className:cn({"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":true,[options?.contentCSS??""]:options?.contentCSS})},React.createElement("div",{className:"pb-4"},children)))};const Accordion=forwardRef(({data,theme="transparent",icons={closed:{name:"icon-gui-plus-outline"},open:{name:"icon-gui-minus-outline"}},options,...props},ref)=>{const openIndexes=useMemo(()=>{const indexValues=data.map((_,i)=>`accordion-item-${i}`);return options?.fullyOpen?indexValues:indexValues.filter((_,index)=>options?.defaultOpenIndexes?.includes(index))},[data,options?.fullyOpen,options?.defaultOpenIndexes]);const[openRowValues,setOpenRowValues]=useState(openIndexes);useEffect(()=>{setOpenRowValues(openIndexes)},[openIndexes]);const innerAccordion=data.map((item,index)=>React.createElement(AccordionRow,{key:item.name,name:item.name,rowIcon:item.icon,toggleIcons:icons,theme:theme,options:options,index:index,onClick:()=>{item.onClick?.(index)},openRowValues:openRowValues,rowInteractive:item.interactive},item.content));return React.createElement("div",{ref:ref,...props},options?.autoClose?React.createElement(RadixAccordion,{type:"single",collapsible:true,value:openRowValues[0],onValueChange:values=>setOpenRowValues([values])},innerAccordion):React.createElement(RadixAccordion,{type:"multiple",value:openRowValues,onValueChange:values=>setOpenRowValues(values)},innerAccordion))});Accordion.displayName="Accordion";export default Accordion;
2
2
  //# sourceMappingURL=Accordion.js.map
package/core/Accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n ReactNode,\n useMemo,\n useState,\n forwardRef,\n useEffect,\n} from \"react\";\nimport {\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n AccordionData,\n AccordionIcon,\n AccordionIcons,\n AccordionOptions,\n AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n themeClasses,\n isNonTransparentTheme,\n isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n children: ReactNode;\n name: string;\n rowIcon?: IconName | AccordionIcon;\n theme: AccordionTheme;\n toggleIcons: AccordionIcons;\n options?: AccordionOptions;\n index: number;\n onClick: () => void;\n openRowValues: string[];\n rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n /**\n * The data for the accordion items.\n */\n data: AccordionData[];\n\n /**\n * Icons for the accordion toggle.\n */\n icons?: AccordionIcons;\n\n /**\n * Theme for the accordion.\n */\n theme?: AccordionTheme;\n\n /**\n * Options for the accordion behavior.\n */\n options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n name,\n children,\n rowIcon,\n options,\n toggleIcons,\n theme,\n index,\n onClick,\n openRowValues,\n rowInteractive = true,\n}: AccordionRowProps) => {\n const { selectable, sticky } = options || {};\n const rowKey = `accordion-item-${index}`;\n const isOpen = openRowValues.includes(rowKey);\n\n const {\n text,\n bg,\n hoverBg,\n selectableBg,\n selectableText,\n border,\n toggleIconColor,\n } = themeClasses[theme];\n\n const textClass = (selectable && isOpen && selectableText) || text;\n\n return (\n <AccordionItem\n value={rowKey}\n className={cn({\n [`${border}`]: border && !options?.hideBorders,\n })}\n >\n <AccordionTrigger\n onClick={onClick}\n className={cn({\n \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n \"pointer-events-none focus-visible:outline-none\":\n isStaticTheme(theme),\n \"focus-base\": !isStaticTheme(theme),\n \"sticky top-0\": sticky,\n [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n [options?.headerCSS ?? \"\"]: options?.headerCSS,\n [options?.selectedHeaderCSS ?? \"\"]:\n options?.selectedHeaderCSS && isOpen,\n })}\n >\n {rowIcon ? (\n <Icon\n name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n color={textClass}\n additionalCSS={\n typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n }\n size={options?.rowIconSize ?? \"32px\"}\n />\n ) : null}\n <span>{name}</span>\n {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n <span className=\"flex-1 justify-end flex items-center\">\n <Icon\n name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n color={toggleIconColor}\n size={options?.iconSize ?? \"16px\"}\n />\n </span>\n ) : null}\n </AccordionTrigger>\n {rowInteractive && (\n <AccordionContent\n className={cn({\n \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n [options?.contentCSS ?? \"\"]: options?.contentCSS,\n })}\n >\n <div className=\"pb-4\">{children}</div>\n </AccordionContent>\n )}\n </AccordionItem>\n );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n data,\n theme = \"transparent\",\n icons = {\n closed: { name: \"icon-gui-plus-outline\" },\n open: { name: \"icon-gui-minus-outline\" },\n },\n options,\n ...props\n },\n ref,\n ) => {\n const openIndexes = useMemo(() => {\n const indexValues = data.map((_, i) => `accordion-item-${i}`);\n return options?.fullyOpen\n ? indexValues\n : indexValues.filter((_, index) =>\n options?.defaultOpenIndexes?.includes(index),\n );\n }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);\n\n const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n useEffect(() => {\n setOpenRowValues(openIndexes);\n }, [openIndexes]);\n\n const innerAccordion = data.map((item, index) => (\n <AccordionRow\n key={item.name}\n name={item.name}\n rowIcon={item.icon}\n toggleIcons={icons}\n theme={theme}\n options={options}\n index={index}\n onClick={() => {\n item.onClick?.(index);\n }}\n openRowValues={openRowValues}\n rowInteractive={item.interactive}\n >\n {item.content}\n </AccordionRow>\n ));\n\n return (\n <div ref={ref} {...props}>\n {options?.autoClose ? (\n <RadixAccordion\n type=\"single\"\n collapsible\n value={openRowValues[0]}\n onValueChange={(values) => setOpenRowValues([values])}\n >\n {innerAccordion}\n </RadixAccordion>\n ) : (\n <RadixAccordion\n type=\"multiple\"\n value={openRowValues}\n onValueChange={(values) => setOpenRowValues(values)}\n >\n {innerAccordion}\n </RadixAccordion>\n )}\n </div>\n );\n },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","length","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n ReactNode,\n useMemo,\n useState,\n forwardRef,\n useEffect,\n} from \"react\";\nimport {\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n AccordionData,\n AccordionIcon,\n AccordionIcons,\n AccordionOptions,\n AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n themeClasses,\n isNonTransparentTheme,\n isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n children: ReactNode;\n name: string;\n rowIcon?: IconName | AccordionIcon;\n theme: AccordionTheme;\n toggleIcons: AccordionIcons;\n options?: AccordionOptions;\n index: number;\n onClick: () => void;\n openRowValues: string[];\n rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n /**\n * The data for the accordion items.\n */\n data: AccordionData[];\n\n /**\n * Icons for the accordion toggle.\n */\n icons?: AccordionIcons;\n\n /**\n * Theme for the accordion.\n */\n theme?: AccordionTheme;\n\n /**\n * Options for the accordion behavior.\n */\n options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n name,\n children,\n rowIcon,\n options,\n toggleIcons,\n theme,\n index,\n onClick,\n openRowValues,\n rowInteractive = true,\n}: AccordionRowProps) => {\n const { selectable, sticky } = options || {};\n const rowKey = `accordion-item-${index}`;\n const isOpen = openRowValues.includes(rowKey);\n\n const {\n text,\n bg,\n hoverBg,\n selectableBg,\n selectableText,\n border,\n toggleIconColor,\n } = themeClasses[theme];\n\n const textClass = (selectable && isOpen && selectableText) || text;\n\n return (\n <AccordionItem\n value={rowKey}\n className={cn({\n [`${border}`]: border && !options?.hideBorders,\n })}\n >\n <AccordionTrigger\n onClick={onClick}\n className={cn({\n \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n \"pointer-events-none focus-visible:outline-none\":\n isStaticTheme(theme),\n \"focus-base\": !isStaticTheme(theme),\n \"sticky top-0\": sticky,\n [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n [options?.headerCSS ?? \"\"]: options?.headerCSS,\n [options?.selectedHeaderCSS ?? \"\"]:\n options?.selectedHeaderCSS && isOpen,\n })}\n >\n {rowIcon ? (\n <Icon\n name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n color={textClass}\n additionalCSS={\n typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n }\n size={options?.rowIconSize ?? \"32px\"}\n />\n ) : null}\n <span>{name}</span>\n {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n <span className=\"flex-1 justify-end flex items-center\">\n <Icon\n name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n color={toggleIconColor}\n size={options?.iconSize ?? \"16px\"}\n />\n </span>\n ) : null}\n </AccordionTrigger>\n {rowInteractive && (\n <AccordionContent\n className={cn({\n \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n [options?.contentCSS ?? \"\"]: options?.contentCSS,\n })}\n >\n <div className=\"pb-4\">{children}</div>\n </AccordionContent>\n )}\n </AccordionItem>\n );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n data,\n theme = \"transparent\",\n icons = {\n closed: { name: \"icon-gui-plus-outline\" },\n open: { name: \"icon-gui-minus-outline\" },\n },\n options,\n ...props\n },\n ref,\n ) => {\n const openIndexes = useMemo(() => {\n const indexValues = data.map((_, i) => `accordion-item-${i}`);\n return options?.fullyOpen\n ? indexValues\n : indexValues.filter((_, index) =>\n options?.defaultOpenIndexes?.includes(index),\n );\n }, [data, options?.fullyOpen, options?.defaultOpenIndexes]);\n\n const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n useEffect(() => {\n setOpenRowValues(openIndexes);\n }, [openIndexes]);\n\n const innerAccordion = data.map((item, index) => (\n <AccordionRow\n key={item.name}\n name={item.name}\n rowIcon={item.icon}\n toggleIcons={icons}\n theme={theme}\n options={options}\n index={index}\n onClick={() => {\n item.onClick?.(index);\n }}\n openRowValues={openRowValues}\n rowInteractive={item.interactive}\n >\n {item.content}\n </AccordionRow>\n ));\n\n return (\n <div ref={ref} {...props}>\n {options?.autoClose ? (\n <RadixAccordion\n type=\"single\"\n collapsible\n value={openRowValues[0]}\n onValueChange={(values) => setOpenRowValues([values])}\n >\n {innerAccordion}\n </RadixAccordion>\n ) : (\n <RadixAccordion\n type=\"multiple\"\n value={openRowValues}\n onValueChange={(values) => setOpenRowValues(values)}\n >\n {innerAccordion}\n </RadixAccordion>\n )}\n </div>\n );\n },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"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"}
package/core/Badge.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,childClassName,children,disabled=false,focusable=false,hoverable=false,iconSize="12px",ariaLabel})=>{const sizeClass=useMemo(()=>{switch(size){case"xs":return"px-2 py-0 text-[10px] leading-tight";case"sm":return"px-2 py-0.5 text-[10px] leading-tight";case"md":return"px-2.5 py-0.5 text-[11px] leading-normal";case"lg":return"px-3 py-[0.1875rem] text-[12px] leading-normal"}},[size]);const childClass=useMemo(()=>{switch(size){case"xs":case"sm":return"leading-[18px]";case"md":case"lg":return"leading-[20px]"}},[size]);const colorClass=useMemo(()=>{switch(color){case"neutral":return"text-neutral-900 dark:text-neutral-400";case"violet":return"text-violet-400";case"orange":return"text-orange-600";case"yellow":return"text-yellow-600";case"green":return"text-green-600";case"blue":return"text-blue-600";case"pink":return"text-pink-600";case"red":return"text-orange-700"}},[color]);return React.createElement("div",{className:cn("inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold",sizeClass,colorClass,{"focus-base":focusable},{"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000":hoverable},{"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark":disabled},className),tabIndex:focusable?0:undefined,"aria-label":focusable||hoverable?ariaLabel:undefined},iconBefore?React.createElement(Icon,{name:iconBefore,size:iconSize,color:colorClass}):null,React.createElement("span",{className:cn("whitespace-nowrap tracking-[0.04em]",childClass,childClassName)},children),iconAfter?React.createElement(Icon,{name:iconAfter,size:iconSize,color:colorClass}):null)};export default Badge;
1
+ import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,childClassName,children,disabled=false,focusable=false,hoverable=false,iconSize="12px",ariaLabel})=>{const sizeClass=useMemo(()=>{switch(size){case"xs":return"px-2 py-0 text-[10px] leading-tight";case"sm":return"px-2 py-0.5 text-[10px] leading-tight";case"md":return"px-2.5 py-0.5 text-[11px] leading-normal";case"lg":return"px-3 py-[0.1875rem] text-[12px] leading-normal"}},[size]);const childClass=useMemo(()=>{switch(size){case"xs":case"sm":return"leading-[18px]";case"md":case"lg":return"leading-[20px]"}},[size]);const colorClass=useMemo(()=>{switch(color){case"neutral":return"text-neutral-900 dark:text-neutral-400";case"violet":return"text-violet-400";case"orange":return"text-orange-600";case"yellow":return"text-yellow-600";case"green":return"text-green-600";case"blue":return"text-blue-600";case"pink":return"text-pink-600";case"red":return"text-orange-700"}},[color]);return React.createElement("div",{className:cn("inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold",sizeClass,colorClass,{"focus-base":focusable},{"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000":hoverable},{"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark":disabled},className),tabIndex:focusable?0:undefined,role:focusable?"button":undefined,"aria-label":focusable||hoverable?ariaLabel:undefined},iconBefore?React.createElement(Icon,{name:iconBefore,size:iconSize,color:colorClass}):null,React.createElement("span",{className:cn("whitespace-nowrap tracking-[0.04em]",childClass,childClassName)},children),iconAfter?React.createElement(Icon,{name:iconAfter,size:iconSize,color:colorClass}):null)};export default Badge;
2
2
  //# sourceMappingURL=Badge.js.map
package/core/Badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/Badge.tsx"],"sourcesContent":["import React, { PropsWithChildren, useMemo } from \"react\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClassColorGroups } from \"./styles/colors/types\";\n\n/**\n * Props for the Badge component.\n */\ninterface BadgeProps {\n /**\n * The size of the badge. Can be one of \"xs\", \"sm\", \"md\", or \"lg\".\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n /**\n * The color of the badge. Can be a value from ColorClassColorGroups or \"red\".\n */\n color?: ColorClassColorGroups | \"red\";\n\n /**\n * The name of the icon to be displayed before the children in the badge.\n */\n iconBefore?: IconName;\n\n /**\n * The name of the icon to be displayed after the children in the badge.\n */\n iconAfter?: IconName;\n\n /**\n * Additional CSS class names to apply to the badge.\n */\n className?: string;\n\n /**\n * Whether the badge is disabled. Defaults to false.\n */\n disabled?: boolean;\n\n /**\n * Whether the badge is focusable. Defaults to false.\n */\n focusable?: boolean;\n\n /**\n * Whether the badge is hoverable. Defaults to false.\n */\n hoverable?: boolean;\n\n /**\n * The size of the icons in the badge. Defaults to 12px.\n */\n iconSize?: IconSize;\n\n /**\n * Accessible label for the badge when interactive\n */\n ariaLabel?: string;\n\n /**\n * Additional CSS class names to apply to the children of the badge.\n */\n childClassName?: string;\n}\n\nconst Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n size = \"md\",\n color = \"neutral\",\n iconBefore,\n iconAfter,\n className,\n childClassName,\n children,\n disabled = false,\n focusable = false,\n hoverable = false,\n iconSize = \"12px\",\n ariaLabel,\n}) => {\n const sizeClass = useMemo(() => {\n switch (size) {\n case \"xs\":\n return \"px-2 py-0 text-[10px] leading-tight\";\n case \"sm\":\n return \"px-2 py-0.5 text-[10px] leading-tight\";\n case \"md\":\n return \"px-2.5 py-0.5 text-[11px] leading-normal\";\n case \"lg\":\n return \"px-3 py-[0.1875rem] text-[12px] leading-normal\";\n }\n }, [size]);\n\n const childClass = useMemo(() => {\n switch (size) {\n case \"xs\":\n case \"sm\":\n return \"leading-[18px]\";\n case \"md\":\n case \"lg\":\n return \"leading-[20px]\";\n }\n }, [size]);\n\n const colorClass = useMemo(() => {\n switch (color) {\n case \"neutral\":\n return \"text-neutral-900 dark:text-neutral-400\";\n case \"violet\":\n return \"text-violet-400\";\n case \"orange\":\n return \"text-orange-600\";\n case \"yellow\":\n return \"text-yellow-600\";\n case \"green\":\n return \"text-green-600\";\n case \"blue\":\n return \"text-blue-600\";\n case \"pink\":\n return \"text-pink-600\";\n case \"red\":\n return \"text-orange-700\";\n }\n }, [color]);\n\n return (\n <div\n className={cn(\n \"inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold\",\n sizeClass,\n colorClass,\n { \"focus-base\": focusable },\n {\n \"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000\":\n hoverable,\n },\n {\n \"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark\":\n disabled,\n },\n className,\n )}\n tabIndex={focusable ? 0 : undefined}\n aria-label={focusable || hoverable ? ariaLabel : undefined}\n >\n {iconBefore ? (\n <Icon name={iconBefore} size={iconSize} color={colorClass} />\n ) : null}\n <span\n className={cn(\n \"whitespace-nowrap tracking-[0.04em]\",\n childClass,\n childClassName,\n )}\n >\n {children}\n </span>\n {iconAfter ? (\n <Icon name={iconAfter} size={iconSize} color={colorClass} />\n ) : null}\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["React","useMemo","Icon","cn","Badge","size","color","iconBefore","iconAfter","className","childClassName","children","disabled","focusable","hoverable","iconSize","ariaLabel","sizeClass","childClass","colorClass","div","tabIndex","undefined","aria-label","name","span"],"mappings":"AAAA,OAAOA,OAA4BC,OAAO,KAAQ,OAAQ,AAE1D,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CA+D5B,MAAMC,MAAiD,CAAC,CACtDC,KAAO,IAAI,CACXC,MAAQ,SAAS,CACjBC,UAAU,CACVC,SAAS,CACTC,SAAS,CACTC,cAAc,CACdC,QAAQ,CACRC,SAAW,KAAK,CAChBC,UAAY,KAAK,CACjBC,UAAY,KAAK,CACjBC,SAAW,MAAM,CACjBC,SAAS,CACV,IACC,MAAMC,UAAYhB,QAAQ,KACxB,OAAQI,MACN,IAAK,KACH,MAAO,qCACT,KAAK,KACH,MAAO,uCACT,KAAK,KACH,MAAO,0CACT,KAAK,KACH,MAAO,gDACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMa,WAAajB,QAAQ,KACzB,OAAQI,MACN,IAAK,KACL,IAAK,KACH,MAAO,gBACT,KAAK,KACL,IAAK,KACH,MAAO,gBACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMc,WAAalB,QAAQ,KACzB,OAAQK,OACN,IAAK,UACH,MAAO,wCACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,QACH,MAAO,gBACT,KAAK,OACH,MAAO,eACT,KAAK,OACH,MAAO,eACT,KAAK,MACH,MAAO,iBACX,CACF,EAAG,CAACA,MAAM,EAEV,OACE,oBAACc,OACCX,UAAWN,GACT,wIACAc,UACAE,WACA,CAAE,aAAcN,SAAU,EAC1B,CACE,oGACEC,SACJ,EACA,CACE,2FACEF,QACJ,EACAH,WAEFY,SAAUR,UAAY,EAAIS,UAC1BC,aAAYV,WAAaC,UAAYE,UAAYM,WAEhDf,WACC,oBAACL,MAAKsB,KAAMjB,WAAYF,KAAMU,SAAUT,MAAOa,aAC7C,KACJ,oBAACM,QACChB,UAAWN,GACT,sCACAe,WACAR,iBAGDC,UAEFH,UACC,oBAACN,MAAKsB,KAAMhB,UAAWH,KAAMU,SAAUT,MAAOa,aAC5C,KAGV,CAEA,gBAAef,KAAM"}
1
+ {"version":3,"sources":["../../src/core/Badge.tsx"],"sourcesContent":["import React, { PropsWithChildren, useMemo } from \"react\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClassColorGroups } from \"./styles/colors/types\";\n\n/**\n * Props for the Badge component.\n */\ninterface BadgeProps {\n /**\n * The size of the badge. Can be one of \"xs\", \"sm\", \"md\", or \"lg\".\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n /**\n * The color of the badge. Can be a value from ColorClassColorGroups or \"red\".\n */\n color?: ColorClassColorGroups | \"red\";\n\n /**\n * The name of the icon to be displayed before the children in the badge.\n */\n iconBefore?: IconName;\n\n /**\n * The name of the icon to be displayed after the children in the badge.\n */\n iconAfter?: IconName;\n\n /**\n * Additional CSS class names to apply to the badge.\n */\n className?: string;\n\n /**\n * Whether the badge is disabled. Defaults to false.\n */\n disabled?: boolean;\n\n /**\n * Whether the badge is focusable. Defaults to false.\n */\n focusable?: boolean;\n\n /**\n * Whether the badge is hoverable. Defaults to false.\n */\n hoverable?: boolean;\n\n /**\n * The size of the icons in the badge. Defaults to 12px.\n */\n iconSize?: IconSize;\n\n /**\n * Accessible label for the badge when interactive\n */\n ariaLabel?: string;\n\n /**\n * Additional CSS class names to apply to the children of the badge.\n */\n childClassName?: string;\n}\n\nconst Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n size = \"md\",\n color = \"neutral\",\n iconBefore,\n iconAfter,\n className,\n childClassName,\n children,\n disabled = false,\n focusable = false,\n hoverable = false,\n iconSize = \"12px\",\n ariaLabel,\n}) => {\n const sizeClass = useMemo(() => {\n switch (size) {\n case \"xs\":\n return \"px-2 py-0 text-[10px] leading-tight\";\n case \"sm\":\n return \"px-2 py-0.5 text-[10px] leading-tight\";\n case \"md\":\n return \"px-2.5 py-0.5 text-[11px] leading-normal\";\n case \"lg\":\n return \"px-3 py-[0.1875rem] text-[12px] leading-normal\";\n }\n }, [size]);\n\n const childClass = useMemo(() => {\n switch (size) {\n case \"xs\":\n case \"sm\":\n return \"leading-[18px]\";\n case \"md\":\n case \"lg\":\n return \"leading-[20px]\";\n }\n }, [size]);\n\n const colorClass = useMemo(() => {\n switch (color) {\n case \"neutral\":\n return \"text-neutral-900 dark:text-neutral-400\";\n case \"violet\":\n return \"text-violet-400\";\n case \"orange\":\n return \"text-orange-600\";\n case \"yellow\":\n return \"text-yellow-600\";\n case \"green\":\n return \"text-green-600\";\n case \"blue\":\n return \"text-blue-600\";\n case \"pink\":\n return \"text-pink-600\";\n case \"red\":\n return \"text-orange-700\";\n }\n }, [color]);\n\n return (\n <div\n className={cn(\n \"inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold\",\n sizeClass,\n colorClass,\n { \"focus-base\": focusable },\n {\n \"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000\":\n hoverable,\n },\n {\n \"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark\":\n disabled,\n },\n className,\n )}\n tabIndex={focusable ? 0 : undefined}\n role={focusable ? \"button\" : undefined}\n aria-label={focusable || hoverable ? ariaLabel : undefined}\n >\n {iconBefore ? (\n <Icon name={iconBefore} size={iconSize} color={colorClass} />\n ) : null}\n <span\n className={cn(\n \"whitespace-nowrap tracking-[0.04em]\",\n childClass,\n childClassName,\n )}\n >\n {children}\n </span>\n {iconAfter ? (\n <Icon name={iconAfter} size={iconSize} color={colorClass} />\n ) : null}\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["React","useMemo","Icon","cn","Badge","size","color","iconBefore","iconAfter","className","childClassName","children","disabled","focusable","hoverable","iconSize","ariaLabel","sizeClass","childClass","colorClass","div","tabIndex","undefined","role","aria-label","name","span"],"mappings":"AAAA,OAAOA,OAA4BC,OAAO,KAAQ,OAAQ,AAE1D,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CA+D5B,MAAMC,MAAiD,CAAC,CACtDC,KAAO,IAAI,CACXC,MAAQ,SAAS,CACjBC,UAAU,CACVC,SAAS,CACTC,SAAS,CACTC,cAAc,CACdC,QAAQ,CACRC,SAAW,KAAK,CAChBC,UAAY,KAAK,CACjBC,UAAY,KAAK,CACjBC,SAAW,MAAM,CACjBC,SAAS,CACV,IACC,MAAMC,UAAYhB,QAAQ,KACxB,OAAQI,MACN,IAAK,KACH,MAAO,qCACT,KAAK,KACH,MAAO,uCACT,KAAK,KACH,MAAO,0CACT,KAAK,KACH,MAAO,gDACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMa,WAAajB,QAAQ,KACzB,OAAQI,MACN,IAAK,KACL,IAAK,KACH,MAAO,gBACT,KAAK,KACL,IAAK,KACH,MAAO,gBACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMc,WAAalB,QAAQ,KACzB,OAAQK,OACN,IAAK,UACH,MAAO,wCACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,QACH,MAAO,gBACT,KAAK,OACH,MAAO,eACT,KAAK,OACH,MAAO,eACT,KAAK,MACH,MAAO,iBACX,CACF,EAAG,CAACA,MAAM,EAEV,OACE,oBAACc,OACCX,UAAWN,GACT,wIACAc,UACAE,WACA,CAAE,aAAcN,SAAU,EAC1B,CACE,oGACEC,SACJ,EACA,CACE,2FACEF,QACJ,EACAH,WAEFY,SAAUR,UAAY,EAAIS,UAC1BC,KAAMV,UAAY,SAAWS,UAC7BE,aAAYX,WAAaC,UAAYE,UAAYM,WAEhDf,WACC,oBAACL,MAAKuB,KAAMlB,WAAYF,KAAMU,SAAUT,MAAOa,aAC7C,KACJ,oBAACO,QACCjB,UAAWN,GACT,sCACAe,WACAR,iBAGDC,UAEFH,UACC,oBAACN,MAAKuB,KAAMjB,UAAWH,KAAMU,SAAUT,MAAOa,aAC5C,KAGV,CAEA,gBAAef,KAAM"}
package/core/CodeSnippet/PlainCodeView.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useRef,useState,useCallback,memo}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 PlainCodeView=({content,className,language,icon})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=useState(false);const handleCopy=useCallback(()=>{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 flex items-center",language==="shell"?"min-h-[3.375rem]":"min-h-12",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,ref:codeRef},icon&&React.createElement("div",{className:"absolute top-2 left-2 z-10"},React.createElement("div",{className:"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:icon,size:"20px",color:"text-neutral-1300 dark:text-neutral-000"}))),React.createElement(Code,{language:language,snippet:content,additionalCSS:cn("w-full bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2",icon&&"pl-14"),showLines:false}),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};PlainCodeView.displayName="PlainCodeView";export default memo(PlainCodeView);
1
+ import React,{useRef,useState,useCallback,memo}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 PlainCodeView=({content,className,language,icon})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=useState(false);const handleCopy=useCallback(()=>{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 flex items-center",language==="shell"?"min-h-[3.375rem]":"min-h-12",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,role:"button","aria-label":"Focusable code view area",ref:codeRef},icon&&React.createElement("div",{className:"absolute top-2 left-2 z-10"},React.createElement("div",{className:"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:icon,size:"20px",color:"text-neutral-1300 dark:text-neutral-000"}))),React.createElement(Code,{language:language,snippet:content,additionalCSS:cn("w-full bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2",icon&&"pl-14"),showLines:false}),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};PlainCodeView.displayName="PlainCodeView";export default memo(PlainCodeView);
2
2
  //# sourceMappingURL=PlainCodeView.js.map
package/core/CodeSnippet/PlainCodeView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/PlainCodeView.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, memo } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\nimport { IconName } from \"../Icon/types\";\n\ntype PlainCodeViewProps = {\n content: string;\n language: string;\n icon: IconName | null;\n className?: string;\n};\n\n/**\n * A specialized component for displaying plain code (shell commands, text, etc.) with copy functionality\n */\nconst PlainCodeView: React.FC<PlainCodeViewProps> = ({\n content,\n className,\n language,\n icon,\n}) => {\n const { isCopied, copy } = useCopyToClipboard();\n const codeRef = useRef<HTMLDivElement>(null);\n const [isHovering, setIsHovering] = useState(false);\n\n // Handler to copy the content\n const handleCopy = useCallback(() => {\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 flex items-center\",\n language === \"shell\" ? \"min-h-[3.375rem]\" : \"min-h-12\",\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 {icon && (\n <div className=\"absolute top-2 left-2 z-10\">\n <div className=\"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n <Icon\n name={icon}\n size=\"20px\"\n color=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </div>\n </div>\n )}\n\n <Code\n language={language}\n snippet={content}\n additionalCSS={cn(\n \"w-full bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2\",\n icon && \"pl-14\",\n )}\n showLines={false}\n />\n\n {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n </div>\n );\n};\n\nPlainCodeView.displayName = \"PlainCodeView\";\n\nexport default memo(PlainCodeView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","PlainCodeView","content","className","language","icon","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","snippet","additionalCSS","showLines","onCopy","displayName"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,QAAQ,CAAEC,WAAW,CAAEC,IAAI,KAAQ,OAAQ,AACnE,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAatC,MAAMC,cAA8C,CAAC,CACnDC,OAAO,CACPC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACL,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGR,qBAC3B,MAAMS,QAAUhB,OAAuB,MACvC,KAAM,CAACiB,WAAYC,cAAc,CAAGjB,SAAS,OAG7C,MAAMkB,WAAajB,YAAY,KAC7Ba,KAAKL,QACP,EAAG,CAACK,KAAML,QAAQ,EAElB,OACE,oBAACU,OACCT,UAAWL,GACT,+IACAM,WAAa,QAAU,mBAAqB,WAC5CD,WAEFU,aAAc,IAAMH,cAAc,MAClCI,aAAc,IAAMJ,cAAc,OAClCK,QAAS,IAAML,cAAc,MAC7BM,OAAQ,IAAMN,cAAc,OAC5BO,SAAU,EACVC,IAAKV,SAEJH,MACC,oBAACO,OAAIT,UAAU,8BACb,oBAACS,OAAIT,UAAU,2FACb,oBAACP,MACCuB,KAAMd,KACNe,KAAK,OACLC,MAAM,8CAMd,oBAACxB,MACCO,SAAUA,SACVkB,QAASpB,QACTqB,cAAezB,GACb,+FACAO,MAAQ,SAEVmB,UAAW,QAGZf,YAAc,oBAACT,YAAWyB,OAAQd,WAAYL,SAAUA,WAG/D,CAEAL,CAAAA,cAAcyB,WAAW,CAAG,eAE5B,gBAAe/B,KAAKM,cAAe"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/PlainCodeView.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, memo } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\nimport { IconName } from \"../Icon/types\";\n\ntype PlainCodeViewProps = {\n content: string;\n language: string;\n icon: IconName | null;\n className?: string;\n};\n\n/**\n * A specialized component for displaying plain code (shell commands, text, etc.) with copy functionality\n */\nconst PlainCodeView: React.FC<PlainCodeViewProps> = ({\n content,\n className,\n language,\n icon,\n}) => {\n const { isCopied, copy } = useCopyToClipboard();\n const codeRef = useRef<HTMLDivElement>(null);\n const [isHovering, setIsHovering] = useState(false);\n\n // Handler to copy the content\n const handleCopy = useCallback(() => {\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 flex items-center\",\n language === \"shell\" ? \"min-h-[3.375rem]\" : \"min-h-12\",\n className,\n )}\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n role=\"button\"\n aria-label=\"Focusable code view area\"\n ref={codeRef}\n >\n {icon && (\n <div className=\"absolute top-2 left-2 z-10\">\n <div className=\"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n <Icon\n name={icon}\n size=\"20px\"\n color=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </div>\n </div>\n )}\n\n <Code\n language={language}\n snippet={content}\n additionalCSS={cn(\n \"w-full bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2\",\n icon && \"pl-14\",\n )}\n showLines={false}\n />\n\n {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n </div>\n );\n};\n\nPlainCodeView.displayName = \"PlainCodeView\";\n\nexport default memo(PlainCodeView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","PlainCodeView","content","className","language","icon","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","role","aria-label","ref","name","size","color","snippet","additionalCSS","showLines","onCopy","displayName"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,QAAQ,CAAEC,WAAW,CAAEC,IAAI,KAAQ,OAAQ,AACnE,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAatC,MAAMC,cAA8C,CAAC,CACnDC,OAAO,CACPC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACL,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGR,qBAC3B,MAAMS,QAAUhB,OAAuB,MACvC,KAAM,CAACiB,WAAYC,cAAc,CAAGjB,SAAS,OAG7C,MAAMkB,WAAajB,YAAY,KAC7Ba,KAAKL,QACP,EAAG,CAACK,KAAML,QAAQ,EAElB,OACE,oBAACU,OACCT,UAAWL,GACT,+IACAM,WAAa,QAAU,mBAAqB,WAC5CD,WAEFU,aAAc,IAAMH,cAAc,MAClCI,aAAc,IAAMJ,cAAc,OAClCK,QAAS,IAAML,cAAc,MAC7BM,OAAQ,IAAMN,cAAc,OAC5BO,SAAU,EACVC,KAAK,SACLC,aAAW,2BACXC,IAAKZ,SAEJH,MACC,oBAACO,OAAIT,UAAU,8BACb,oBAACS,OAAIT,UAAU,2FACb,oBAACP,MACCyB,KAAMhB,KACNiB,KAAK,OACLC,MAAM,8CAMd,oBAAC1B,MACCO,SAAUA,SACVoB,QAAStB,QACTuB,cAAe3B,GACb,+FACAO,MAAQ,SAEVqB,UAAW,QAGZjB,YAAc,oBAACT,YAAW2B,OAAQhB,WAAYL,SAAUA,WAG/D,CAEAL,CAAAA,cAAc2B,WAAW,CAAG,eAE5B,gBAAejC,KAAKM,cAAe"}
package/core/CodeSnippet/TooltipButton.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{memo,useMemo}from"react";import Tooltip from"../Tooltip";import SegmentedControl from"../SegmentedControl";import cn from"../utils/cn";const TooltipButton=memo(({tooltip,active=false,onClick,icon,className,children,variant="segmented",size="sm",alwaysShowLabel=false})=>{const showTooltip=variant==="segmented"&&!active||variant==="icon-button";const showChildren=active||alwaysShowLabel;const buttonElement=useMemo(()=>{if(variant==="segmented"){return 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)},showChildren?children:null)}return React.createElement("div",{role:"button",className:cn("w-8 h-8 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)},[variant,size,active,onClick,icon,className,showChildren,children,tooltip]);if(showTooltip){return React.createElement(Tooltip,{triggerElement:buttonElement,className:"ml-0"},tooltip)}return buttonElement});TooltipButton.displayName="TooltipButton";export default TooltipButton;
1
+ import React,{memo,useMemo}from"react";import Tooltip from"../Tooltip";import SegmentedControl from"../SegmentedControl";import cn from"../utils/cn";const TooltipButton=memo(({tooltip,active=false,onClick,icon,className,children,variant="segmented",size="sm",alwaysShowLabel=false})=>{const showTooltip=variant==="segmented"&&!active||variant==="icon-button";const showChildren=active||alwaysShowLabel;const buttonElement=useMemo(()=>{if(variant==="segmented"){return 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)},showChildren?children:null)}return React.createElement("div",{role:"button",className:cn("w-8 h-8 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,onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();onClick?.()}},tabIndex:0,"aria-label":tooltip},children)},[variant,size,active,onClick,icon,className,showChildren,children,tooltip]);if(showTooltip){return React.createElement(Tooltip,{triggerElement:buttonElement,className:"ml-0"},tooltip)}return buttonElement});TooltipButton.displayName="TooltipButton";export default TooltipButton;
2
2
  //# sourceMappingURL=TooltipButton.js.map
package/core/CodeSnippet/TooltipButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/TooltipButton.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport Tooltip from \"../Tooltip\";\nimport SegmentedControl from \"../SegmentedControl\";\nimport cn from \"../utils/cn\";\nimport { IconName } from \"../Icon/types\";\n\ntype 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 = memo(\n ({\n tooltip,\n active = false,\n onClick,\n icon,\n className,\n children,\n variant = \"segmented\",\n size = \"sm\",\n alwaysShowLabel = false,\n }: TooltipButtonProps) => {\n // Only show tooltip for inactive segmented controls or all icon buttons\n const showTooltip =\n (variant === \"segmented\" && !active) || variant === \"icon-button\";\n\n // Determine whether to show children based on active state and alwaysShowLabel\n const showChildren = active || alwaysShowLabel;\n\n // Create the button element based on variant\n const buttonElement = useMemo(() => {\n if (variant === \"segmented\") {\n return (\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 {showChildren ? children : null}\n </SegmentedControl>\n );\n }\n\n return (\n <div\n role=\"button\"\n className={cn(\n \"w-8 h-8 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 variant,\n size,\n active,\n onClick,\n icon,\n className,\n showChildren,\n children,\n tooltip,\n ]);\n\n // Render with tooltip if needed\n if (showTooltip) {\n return (\n <Tooltip triggerElement={buttonElement} className=\"ml-0\">\n {tooltip}\n </Tooltip>\n );\n }\n\n return buttonElement;\n },\n);\n\n// Add displayName for better debugging\nTooltipButton.displayName = \"TooltipButton\";\n\nexport default TooltipButton;\n"],"names":["React","memo","useMemo","Tooltip","SegmentedControl","cn","TooltipButton","tooltip","active","onClick","icon","className","children","variant","size","alwaysShowLabel","showTooltip","showChildren","buttonElement","leftIcon","div","role","aria-label","triggerElement","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,QAAOC,YAAa,YAAa,AACjC,QAAOC,qBAAsB,qBAAsB,AACnD,QAAOC,OAAQ,aAAc,CAkB7B,MAAMC,cAAgBL,KACpB,CAAC,CACCM,OAAO,CACPC,OAAS,KAAK,CACdC,OAAO,CACPC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,QAAU,WAAW,CACrBC,KAAO,IAAI,CACXC,gBAAkB,KAAK,CACJ,IAEnB,MAAMC,YACJ,AAACH,UAAY,aAAe,CAACL,QAAWK,UAAY,cAGtD,MAAMI,aAAeT,QAAUO,gBAG/B,MAAMG,cAAgBhB,QAAQ,KAC5B,GAAIW,UAAY,YAAa,CAC3B,OACE,oBAACT,kBACCU,KAAMA,KACNN,OAAQA,OACRC,QAASA,QACTU,SAAUT,KACVC,UAAWN,GACT,aACAG,OACI,sCACA,sCACJG,YAGDM,aAAeL,SAAW,KAGjC,CAEA,OACE,oBAACQ,OACCC,KAAK,SACLV,UAAWN,GACT,uKACAM,WAEFF,QAASA,QACTa,aAAYf,SAEXK,SAGP,EAAG,CACDC,QACAC,KACAN,OACAC,QACAC,KACAC,UACAM,aACAL,SACAL,QACD,EAGD,GAAIS,YAAa,CACf,OACE,oBAACb,SAAQoB,eAAgBL,cAAeP,UAAU,QAC/CJ,QAGP,CAEA,OAAOW,aACT,EAIFZ,CAAAA,cAAckB,WAAW,CAAG,eAE5B,gBAAelB,aAAc"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/TooltipButton.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport Tooltip from \"../Tooltip\";\nimport SegmentedControl from \"../SegmentedControl\";\nimport cn from \"../utils/cn\";\nimport { IconName } from \"../Icon/types\";\n\ntype 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 = memo(\n ({\n tooltip,\n active = false,\n onClick,\n icon,\n className,\n children,\n variant = \"segmented\",\n size = \"sm\",\n alwaysShowLabel = false,\n }: TooltipButtonProps) => {\n // Only show tooltip for inactive segmented controls or all icon buttons\n const showTooltip =\n (variant === \"segmented\" && !active) || variant === \"icon-button\";\n\n // Determine whether to show children based on active state and alwaysShowLabel\n const showChildren = active || alwaysShowLabel;\n\n // Create the button element based on variant\n const buttonElement = useMemo(() => {\n if (variant === \"segmented\") {\n return (\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 {showChildren ? children : null}\n </SegmentedControl>\n );\n }\n\n return (\n <div\n role=\"button\"\n className={cn(\n \"w-8 h-8 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 onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onClick?.();\n }\n }}\n tabIndex={0}\n aria-label={tooltip}\n >\n {children}\n </div>\n );\n }, [\n variant,\n size,\n active,\n onClick,\n icon,\n className,\n showChildren,\n children,\n tooltip,\n ]);\n\n // Render with tooltip if needed\n if (showTooltip) {\n return (\n <Tooltip triggerElement={buttonElement} className=\"ml-0\">\n {tooltip}\n </Tooltip>\n );\n }\n\n return buttonElement;\n },\n);\n\n// Add displayName for better debugging\nTooltipButton.displayName = \"TooltipButton\";\n\nexport default TooltipButton;\n"],"names":["React","memo","useMemo","Tooltip","SegmentedControl","cn","TooltipButton","tooltip","active","onClick","icon","className","children","variant","size","alwaysShowLabel","showTooltip","showChildren","buttonElement","leftIcon","div","role","onKeyDown","e","key","preventDefault","tabIndex","aria-label","triggerElement","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,QAAOC,YAAa,YAAa,AACjC,QAAOC,qBAAsB,qBAAsB,AACnD,QAAOC,OAAQ,aAAc,CAkB7B,MAAMC,cAAgBL,KACpB,CAAC,CACCM,OAAO,CACPC,OAAS,KAAK,CACdC,OAAO,CACPC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,QAAU,WAAW,CACrBC,KAAO,IAAI,CACXC,gBAAkB,KAAK,CACJ,IAEnB,MAAMC,YACJ,AAACH,UAAY,aAAe,CAACL,QAAWK,UAAY,cAGtD,MAAMI,aAAeT,QAAUO,gBAG/B,MAAMG,cAAgBhB,QAAQ,KAC5B,GAAIW,UAAY,YAAa,CAC3B,OACE,oBAACT,kBACCU,KAAMA,KACNN,OAAQA,OACRC,QAASA,QACTU,SAAUT,KACVC,UAAWN,GACT,aACAG,OACI,sCACA,sCACJG,YAGDM,aAAeL,SAAW,KAGjC,CAEA,OACE,oBAACQ,OACCC,KAAK,SACLV,UAAWN,GACT,uKACAM,WAEFF,QAASA,QACTa,UAAW,AAACC,IACV,GAAIA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,IAAK,CACtCD,EAAEE,cAAc,GAChBhB,WACF,CACF,EACAiB,SAAU,EACVC,aAAYpB,SAEXK,SAGP,EAAG,CACDC,QACAC,KACAN,OACAC,QACAC,KACAC,UACAM,aACAL,SACAL,QACD,EAGD,GAAIS,YAAa,CACf,OACE,oBAACb,SAAQyB,eAAgBV,cAAeP,UAAU,QAC/CJ,QAGP,CAEA,OAAOW,aACT,EAIFZ,CAAAA,cAAcuB,WAAW,CAAG,eAE5B,gBAAevB,aAAc"}
package/core/CodeSnippet/languages.js CHANGED
@@ -1,2 +1,2 @@
1
- const languages={javascript:{label:"JavaScript",icon:"icon-tech-javascript",syntaxHighlighterKey:"javascript"},typescript:{label:"TypeScript",icon:"icon-tech-typescript",syntaxHighlighterKey:"typescript"},java:{label:"Java",icon:"icon-tech-java",syntaxHighlighterKey:"java"},kotlin:{label:"Kotlin",icon:"icon-tech-kotlin",syntaxHighlighterKey:"kotlin"},python:{label:"Python",icon:"icon-tech-python",syntaxHighlighterKey:"python"},csharp:{label:"C#",icon:"icon-tech-csharp",syntaxHighlighterKey:"csharp"},go:{label:"Go",icon:"icon-tech-go",syntaxHighlighterKey:"go"},ruby:{label:"Ruby",icon:"icon-tech-ruby",syntaxHighlighterKey:"ruby"},php:{label:"PHP",icon:"icon-tech-php",syntaxHighlighterKey:"php"},nodejs:{label:"Node.js",icon:"icon-tech-nodejs",syntaxHighlighterKey:"javascript"},react:{label:"React",icon:"icon-tech-react",syntaxHighlighterKey:"javascript"},html:{label:"HTML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},shell:{label:"Shell",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},json:{label:"JSON",icon:"icon-tech-json",syntaxHighlighterKey:"json"},xml:{label:"XML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},sql:{label:"SQL",icon:"icon-tech-postgres",syntaxHighlighterKey:"sql"},swift:{label:"Swift",icon:"icon-tech-swift",syntaxHighlighterKey:"swift"},cpp:{label:"C++",icon:"icon-tech-web",syntaxHighlighterKey:"cpp"},dart:{label:"Dart",icon:"icon-tech-web",syntaxHighlighterKey:"dart"},objc:{label:"Objective-C",icon:"icon-tech-objectivec",syntaxHighlighterKey:"objc"},android:{label:"Android",icon:"icon-tech-android-head",syntaxHighlighterKey:"java"},flutter:{label:"Flutter",icon:"icon-tech-flutter",syntaxHighlighterKey:"dart"}};export const stripSdkType=lang=>{if(lang.startsWith("realtime_")||lang.startsWith("rest_")){return lang.split("_").slice(1).join("_")}return lang};export const getLanguageInfo=langKey=>{const key=stripSdkType(langKey).toLowerCase();if(languages[key]){return languages[key]}return{label:langKey,icon:"icon-tech-web",syntaxHighlighterKey:langKey}};export default languages;
1
+ const languages={javascript:{label:"JavaScript",icon:"icon-tech-javascript",syntaxHighlighterKey:"javascript"},typescript:{label:"TypeScript",icon:"icon-tech-typescript",syntaxHighlighterKey:"typescript"},java:{label:"Java",icon:"icon-tech-java",syntaxHighlighterKey:"java"},kotlin:{label:"Kotlin",icon:"icon-tech-kotlin",syntaxHighlighterKey:"kotlin"},python:{label:"Python",icon:"icon-tech-python",syntaxHighlighterKey:"python"},csharp:{label:"C#",icon:"icon-tech-csharp",syntaxHighlighterKey:"csharp"},go:{label:"Go",icon:"icon-tech-go",syntaxHighlighterKey:"go"},ruby:{label:"Ruby",icon:"icon-tech-ruby",syntaxHighlighterKey:"ruby"},php:{label:"PHP",icon:"icon-tech-php",syntaxHighlighterKey:"php"},nodejs:{label:"Node.js",icon:"icon-tech-nodejs",syntaxHighlighterKey:"javascript"},react:{label:"React",icon:"icon-tech-react",syntaxHighlighterKey:"javascript"},html:{label:"HTML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},shell:{label:"Shell",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},json:{label:"JSON",icon:"icon-tech-json",syntaxHighlighterKey:"json"},laravel:{label:"Laravel",icon:"icon-tech-laravel-broadcast",syntaxHighlighterKey:"php"},xml:{label:"XML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},sql:{label:"SQL",icon:"icon-tech-postgres",syntaxHighlighterKey:"sql"},swift:{label:"Swift",icon:"icon-tech-swift",syntaxHighlighterKey:"swift"},cpp:{label:"C++",icon:"icon-tech-web",syntaxHighlighterKey:"cpp"},dart:{label:"Dart",icon:"icon-tech-web",syntaxHighlighterKey:"dart"},objc:{label:"Objective-C",icon:"icon-tech-objectivec",syntaxHighlighterKey:"objc"},android:{label:"Android",icon:"icon-tech-android-head",syntaxHighlighterKey:"java"},flutter:{label:"Flutter",icon:"icon-tech-flutter",syntaxHighlighterKey:"dart"}};export const stripSdkType=lang=>{if(lang.startsWith("realtime_")||lang.startsWith("rest_")){return lang.split("_").slice(1).join("_")}return lang};export const getLanguageInfo=langKey=>{const key=stripSdkType(langKey).toLowerCase();if(languages[key]){return languages[key]}return{label:langKey,icon:"icon-tech-web",syntaxHighlighterKey:langKey}};export default languages;
2
2
  //# sourceMappingURL=languages.js.map
package/core/CodeSnippet/languages.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/languages.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport interface LanguageInfo {\n label: string;\n icon: IconName;\n syntaxHighlighterKey?: string;\n}\n\nexport type LanguageMap = Record<string, LanguageInfo>;\n\nconst languages: LanguageMap = {\n javascript: {\n label: \"JavaScript\",\n icon: \"icon-tech-javascript\",\n syntaxHighlighterKey: \"javascript\",\n },\n typescript: {\n label: \"TypeScript\",\n icon: \"icon-tech-typescript\",\n syntaxHighlighterKey: \"typescript\",\n },\n java: {\n label: \"Java\",\n icon: \"icon-tech-java\",\n syntaxHighlighterKey: \"java\",\n },\n kotlin: {\n label: \"Kotlin\",\n icon: \"icon-tech-kotlin\",\n syntaxHighlighterKey: \"kotlin\",\n },\n python: {\n label: \"Python\",\n icon: \"icon-tech-python\",\n syntaxHighlighterKey: \"python\",\n },\n csharp: {\n label: \"C#\",\n icon: \"icon-tech-csharp\",\n syntaxHighlighterKey: \"csharp\",\n },\n go: {\n label: \"Go\",\n icon: \"icon-tech-go\",\n syntaxHighlighterKey: \"go\",\n },\n ruby: {\n label: \"Ruby\",\n icon: \"icon-tech-ruby\",\n syntaxHighlighterKey: \"ruby\",\n },\n php: {\n label: \"PHP\",\n icon: \"icon-tech-php\",\n syntaxHighlighterKey: \"php\",\n },\n nodejs: {\n label: \"Node.js\",\n icon: \"icon-tech-nodejs\",\n syntaxHighlighterKey: \"javascript\",\n },\n react: {\n label: \"React\",\n icon: \"icon-tech-react\",\n syntaxHighlighterKey: \"javascript\",\n },\n html: {\n label: \"HTML\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"xml\",\n },\n shell: {\n label: \"Shell\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"bash\",\n },\n json: {\n label: \"JSON\",\n icon: \"icon-tech-json\",\n syntaxHighlighterKey: \"json\",\n },\n xml: {\n label: \"XML\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"xml\",\n },\n sql: {\n label: \"SQL\",\n icon: \"icon-tech-postgres\",\n syntaxHighlighterKey: \"sql\",\n },\n swift: {\n label: \"Swift\",\n icon: \"icon-tech-swift\",\n syntaxHighlighterKey: \"swift\",\n },\n // New entries from languageInfo.ts\n cpp: {\n label: \"C++\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"cpp\",\n },\n dart: {\n label: \"Dart\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"dart\",\n },\n objc: {\n label: \"Objective-C\",\n icon: \"icon-tech-objectivec\",\n syntaxHighlighterKey: \"objc\",\n },\n android: {\n label: \"Android\",\n icon: \"icon-tech-android-head\",\n syntaxHighlighterKey: \"java\",\n },\n flutter: {\n label: \"Flutter\",\n icon: \"icon-tech-flutter\",\n syntaxHighlighterKey: \"dart\",\n },\n};\n\nexport const stripSdkType = (lang: string) => {\n if (lang.startsWith(\"realtime_\") || lang.startsWith(\"rest_\")) {\n return lang.split(\"_\").slice(1).join(\"_\");\n }\n return lang;\n};\n\n// Fallback function to handle languages not in the map\nexport const getLanguageInfo = (langKey: string): LanguageInfo => {\n const key = stripSdkType(langKey).toLowerCase();\n\n if (languages[key]) {\n return languages[key];\n }\n\n // Fallback for unknown languages\n return {\n label: langKey,\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: langKey,\n };\n};\n\nexport default languages;\n"],"names":["languages","javascript","label","icon","syntaxHighlighterKey","typescript","java","kotlin","python","csharp","go","ruby","php","nodejs","react","html","shell","json","xml","sql","swift","cpp","dart","objc","android","flutter","stripSdkType","lang","startsWith","split","slice","join","getLanguageInfo","langKey","key","toLowerCase"],"mappings":"AAUA,MAAMA,UAAyB,CAC7BC,WAAY,CACVC,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAC,WAAY,CACVH,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAE,KAAM,CACJJ,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAG,OAAQ,CACNL,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAI,OAAQ,CACNN,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAK,OAAQ,CACNP,MAAO,KACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAM,GAAI,CACFR,MAAO,KACPC,KAAM,eACNC,qBAAsB,IACxB,EACAO,KAAM,CACJT,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAQ,IAAK,CACHV,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAS,OAAQ,CACNX,MAAO,UACPC,KAAM,mBACNC,qBAAsB,YACxB,EACAU,MAAO,CACLZ,MAAO,QACPC,KAAM,kBACNC,qBAAsB,YACxB,EACAW,KAAM,CACJb,MAAO,OACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAY,MAAO,CACLd,MAAO,QACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAa,KAAM,CACJf,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAc,IAAK,CACHhB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAe,IAAK,CACHjB,MAAO,MACPC,KAAM,qBACNC,qBAAsB,KACxB,EACAgB,MAAO,CACLlB,MAAO,QACPC,KAAM,kBACNC,qBAAsB,OACxB,EAEAiB,IAAK,CACHnB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAkB,KAAM,CACJpB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAmB,KAAM,CACJrB,MAAO,cACPC,KAAM,uBACNC,qBAAsB,MACxB,EACAoB,QAAS,CACPtB,MAAO,UACPC,KAAM,yBACNC,qBAAsB,MACxB,EACAqB,QAAS,CACPvB,MAAO,UACPC,KAAM,oBACNC,qBAAsB,MACxB,CACF,CAEA,QAAO,MAAMsB,aAAe,AAACC,OAC3B,GAAIA,KAAKC,UAAU,CAAC,cAAgBD,KAAKC,UAAU,CAAC,SAAU,CAC5D,OAAOD,KAAKE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAGC,IAAI,CAAC,IACvC,CACA,OAAOJ,IACT,CAAE,AAGF,QAAO,MAAMK,gBAAkB,AAACC,UAC9B,MAAMC,IAAMR,aAAaO,SAASE,WAAW,GAE7C,GAAInC,SAAS,CAACkC,IAAI,CAAE,CAClB,OAAOlC,SAAS,CAACkC,IAAI,AACvB,CAGA,MAAO,CACLhC,MAAO+B,QACP9B,KAAM,gBACNC,qBAAsB6B,OACxB,CACF,CAAE,AAEF,gBAAejC,SAAU"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/languages.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport interface LanguageInfo {\n label: string;\n icon: IconName;\n syntaxHighlighterKey?: string;\n}\n\nexport type LanguageMap = Record<string, LanguageInfo>;\n\nconst languages: LanguageMap = {\n javascript: {\n label: \"JavaScript\",\n icon: \"icon-tech-javascript\",\n syntaxHighlighterKey: \"javascript\",\n },\n typescript: {\n label: \"TypeScript\",\n icon: \"icon-tech-typescript\",\n syntaxHighlighterKey: \"typescript\",\n },\n java: {\n label: \"Java\",\n icon: \"icon-tech-java\",\n syntaxHighlighterKey: \"java\",\n },\n kotlin: {\n label: \"Kotlin\",\n icon: \"icon-tech-kotlin\",\n syntaxHighlighterKey: \"kotlin\",\n },\n python: {\n label: \"Python\",\n icon: \"icon-tech-python\",\n syntaxHighlighterKey: \"python\",\n },\n csharp: {\n label: \"C#\",\n icon: \"icon-tech-csharp\",\n syntaxHighlighterKey: \"csharp\",\n },\n go: {\n label: \"Go\",\n icon: \"icon-tech-go\",\n syntaxHighlighterKey: \"go\",\n },\n ruby: {\n label: \"Ruby\",\n icon: \"icon-tech-ruby\",\n syntaxHighlighterKey: \"ruby\",\n },\n php: {\n label: \"PHP\",\n icon: \"icon-tech-php\",\n syntaxHighlighterKey: \"php\",\n },\n nodejs: {\n label: \"Node.js\",\n icon: \"icon-tech-nodejs\",\n syntaxHighlighterKey: \"javascript\",\n },\n react: {\n label: \"React\",\n icon: \"icon-tech-react\",\n syntaxHighlighterKey: \"javascript\",\n },\n html: {\n label: \"HTML\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"xml\",\n },\n shell: {\n label: \"Shell\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"bash\",\n },\n json: {\n label: \"JSON\",\n icon: \"icon-tech-json\",\n syntaxHighlighterKey: \"json\",\n },\n laravel: {\n label: \"Laravel\",\n icon: \"icon-tech-laravel-broadcast\",\n syntaxHighlighterKey: \"php\",\n },\n xml: {\n label: \"XML\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"xml\",\n },\n sql: {\n label: \"SQL\",\n icon: \"icon-tech-postgres\",\n syntaxHighlighterKey: \"sql\",\n },\n swift: {\n label: \"Swift\",\n icon: \"icon-tech-swift\",\n syntaxHighlighterKey: \"swift\",\n },\n // New entries from languageInfo.ts\n cpp: {\n label: \"C++\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"cpp\",\n },\n dart: {\n label: \"Dart\",\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: \"dart\",\n },\n objc: {\n label: \"Objective-C\",\n icon: \"icon-tech-objectivec\",\n syntaxHighlighterKey: \"objc\",\n },\n android: {\n label: \"Android\",\n icon: \"icon-tech-android-head\",\n syntaxHighlighterKey: \"java\",\n },\n flutter: {\n label: \"Flutter\",\n icon: \"icon-tech-flutter\",\n syntaxHighlighterKey: \"dart\",\n },\n};\n\nexport const stripSdkType = (lang: string) => {\n if (lang.startsWith(\"realtime_\") || lang.startsWith(\"rest_\")) {\n return lang.split(\"_\").slice(1).join(\"_\");\n }\n return lang;\n};\n\n// Fallback function to handle languages not in the map\nexport const getLanguageInfo = (langKey: string): LanguageInfo => {\n const key = stripSdkType(langKey).toLowerCase();\n\n if (languages[key]) {\n return languages[key];\n }\n\n // Fallback for unknown languages\n return {\n label: langKey,\n icon: \"icon-tech-web\",\n syntaxHighlighterKey: langKey,\n };\n};\n\nexport default languages;\n"],"names":["languages","javascript","label","icon","syntaxHighlighterKey","typescript","java","kotlin","python","csharp","go","ruby","php","nodejs","react","html","shell","json","laravel","xml","sql","swift","cpp","dart","objc","android","flutter","stripSdkType","lang","startsWith","split","slice","join","getLanguageInfo","langKey","key","toLowerCase"],"mappings":"AAUA,MAAMA,UAAyB,CAC7BC,WAAY,CACVC,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAC,WAAY,CACVH,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAE,KAAM,CACJJ,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAG,OAAQ,CACNL,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAI,OAAQ,CACNN,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAK,OAAQ,CACNP,MAAO,KACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAM,GAAI,CACFR,MAAO,KACPC,KAAM,eACNC,qBAAsB,IACxB,EACAO,KAAM,CACJT,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAQ,IAAK,CACHV,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAS,OAAQ,CACNX,MAAO,UACPC,KAAM,mBACNC,qBAAsB,YACxB,EACAU,MAAO,CACLZ,MAAO,QACPC,KAAM,kBACNC,qBAAsB,YACxB,EACAW,KAAM,CACJb,MAAO,OACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAY,MAAO,CACLd,MAAO,QACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAa,KAAM,CACJf,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAc,QAAS,CACPhB,MAAO,UACPC,KAAM,8BACNC,qBAAsB,KACxB,EACAe,IAAK,CACHjB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAgB,IAAK,CACHlB,MAAO,MACPC,KAAM,qBACNC,qBAAsB,KACxB,EACAiB,MAAO,CACLnB,MAAO,QACPC,KAAM,kBACNC,qBAAsB,OACxB,EAEAkB,IAAK,CACHpB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAmB,KAAM,CACJrB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAoB,KAAM,CACJtB,MAAO,cACPC,KAAM,uBACNC,qBAAsB,MACxB,EACAqB,QAAS,CACPvB,MAAO,UACPC,KAAM,yBACNC,qBAAsB,MACxB,EACAsB,QAAS,CACPxB,MAAO,UACPC,KAAM,oBACNC,qBAAsB,MACxB,CACF,CAEA,QAAO,MAAMuB,aAAe,AAACC,OAC3B,GAAIA,KAAKC,UAAU,CAAC,cAAgBD,KAAKC,UAAU,CAAC,SAAU,CAC5D,OAAOD,KAAKE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAGC,IAAI,CAAC,IACvC,CACA,OAAOJ,IACT,CAAE,AAGF,QAAO,MAAMK,gBAAkB,AAACC,UAC9B,MAAMC,IAAMR,aAAaO,SAASE,WAAW,GAE7C,GAAIpC,SAAS,CAACmC,IAAI,CAAE,CAClB,OAAOnC,SAAS,CAACmC,IAAI,AACvB,CAGA,MAAO,CACLjC,MAAOgC,QACP/B,KAAM,gBACNC,qBAAsB8B,OACxB,CACF,CAAE,AAEF,gBAAelC,SAAU"}
package/core/CodeSnippet.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import Icon from"./Icon";import{getLanguageInfo,stripSdkType}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const substituteApiKey=(content,apiKey,mask=true)=>{return content.replace(/\{\{API_KEY\}\}/g,mask?`${apiKey.split(":")[0]}:*****`:apiKey)};const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys,selectedApiKey]);useEffect(()=>{const element=codeRef.current;if(!element)return;const unmaskRenderedApiKey=(content,apiKey)=>{return content.replace(/(['"]?)([^:'"]+):\*{5}\1/g,`$1${apiKey}$1`)};const handleCopy=event=>{const selection=window.getSelection();if(!selection||selection.rangeCount===0)return;const selectedText=selection.toString();if(!selectedText)return;const range=selection.getRangeAt(0);if(!element.contains(range.commonAncestorContainer))return;const modifiedText=unmaskRenderedApiKey(selectedText,selectedApiKey);event.clipboardData?.setData("text/plain",modifiedText);event.preventDefault()};document.addEventListener("copy",handleCopy);return()=>{document.removeEventListener("copy",handleCopy)}},[codeRef.current,selectedApiKey]);const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{codeData,languages,sdkTypes,isSinglePlainCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const codeData=[];const isSinglePlainCommand=childrenArray.length===1&&["language-shell","language-text"].some(lang=>isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes(lang));childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return;const codeLanguage=extractLanguageFromCode(codeElement);if(!codeLanguage)return;if(codeLanguage.startsWith("realtime_")){sdkTypes.add("realtime")}else if(codeLanguage.startsWith("rest_")){sdkTypes.add("rest")}if(!languages.includes(codeLanguage)){languages.push(codeLanguage)}const codeContent=codeElement.props.children;codeData.push({language:codeLanguage,content:codeContent})});return{codeData,languages,sdkTypes,isSinglePlainCommand}},[children,extractLanguageFromCode]);const resolvedSdk=useMemo(()=>{if(sdkTypes.size===1&&sdk&&!sdkTypes.has(sdk)){return Array.from(sdkTypes)[0]}return sdk??null},[sdk,sdkTypes]);const showSDKSelector=sdkTypes.size>0;const filteredLanguages=useMemo(()=>{const filtered=!resolvedSdk||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${resolvedSdk}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=stripSdkType(a);const bBase=stripSdkType(b);const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[resolvedSdk,showSDKSelector,languages,languageOrdering]);const activeLanguage=useMemo(()=>{if(resolvedSdk&&sdkTypes.has(resolvedSdk)){return`${resolvedSdk}_${lang}`}if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return languages[0]},[lang,resolvedSdk,sdkTypes,filteredLanguages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}"));return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey]);const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return codeData.filter(code=>{return code?.language===targetLanguage}).map(code=>{if(!code)return null;const cleanLang=hasOnlyJsonSnippet?"json":code.language;const langInfo=getLanguageInfo(cleanLang??"");if(typeof code.content==="string"||typeof code.content==="number"||typeof code.content==="boolean"){let processedContent=String(code.content);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}if(!langInfo.syntaxHighlighterKey||!cleanLang)return null;return React.createElement(Code,{key:code.language,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return null})},[activeLanguage,codeData,hasOnlyJsonSnippet,showCodeLines,apiKeys,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return codeData.some(code=>{return code?.language===activeLanguage})},[activeLanguage,hasOnlyJsonSnippet,codeData]);const handleSDKTypeChange=useCallback(type=>{const nextLang=stripSdkType(languages.find(l=>l===`${type}_${stripSdkType(activeLanguage)}`)??languages.find(l=>l.startsWith(`${type}_`))??activeLanguage);if(onChange&&nextLang){onChange(stripSdkType(activeLanguage),type)}},[languages]);const handleLanguageChange=useCallback(language=>{if(onChange){onChange(stripSdkType(language),resolvedSdk)}},[onChange,resolvedSdk]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguage)return()=>null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return()=>React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 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."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}return React.createElement(NoSnippetMessage,null)},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,NoSnippetMessage]);if(isSinglePlainCommand){const plainChild=codeData[0];if(plainChild){const codeContent=plainChild.content;const language=plainChild.language;if(!language||!codeContent)return null;let processedContent=String(codeContent);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(PlainCodeView,{content:processedContent,className:className,language:language,icon:language==="shell"?"icon-gui-command-line-outline":null})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]",className)},headerRow&&React.createElement("div",{className:"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg"},React.createElement("div",{className:"flex space-x-1.5"},React.createElement("div",{className:"w-3 h-3 rounded-full bg-orange-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-3 h-3 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-12"})),showSDKSelector&&React.createElement("div",{className:cn("p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-3 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:resolvedSdk==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:resolvedSdk==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full",{"rounded-t-lg":!headerRow})},filteredLanguages.length>0&&React.createElement("div",{className:cn("inline-flex items-center",{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},React.createElement(Icon,{name:getLanguageInfo(filteredLanguages[0]).icon,size:"16px",additionalCSS:"mr-2"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageInfo(filteredLanguages[0]).label)))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)copy(substituteApiKey(text,selectedApiKey,false))},isCopied:isCopied})),requiresApiKeySubstitution&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
1
+ import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import Icon from"./Icon";import{getLanguageInfo,stripSdkType}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const substituteApiKey=(content,apiKey,mask=true)=>{return content.replace(/\{\{API_KEY\}\}/g,mask?`${apiKey.split(":")[0]}:*****`:apiKey)};const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]?.key??"");useEffect(()=>{if(!selectedApiKey&&apiKeys&&apiKeys.length>0){setSelectedApiKey(apiKeys[0].keys?.[0]?.key)}},[apiKeys,selectedApiKey]);useEffect(()=>{const element=codeRef.current;if(!element)return;const unmaskRenderedApiKey=(content,apiKey)=>{return content.replace(/(['"]?)([^:'"]+):\*{5}\1/g,`$1${apiKey}$1`)};const handleCopy=event=>{const selection=window.getSelection();if(!selection||selection.rangeCount===0)return;const selectedText=selection.toString();if(!selectedText)return;const range=selection.getRangeAt(0);if(!element.contains(range.commonAncestorContainer))return;const modifiedText=unmaskRenderedApiKey(selectedText,selectedApiKey);event.clipboardData?.setData("text/plain",modifiedText);event.preventDefault()};document.addEventListener("copy",handleCopy);return()=>{document.removeEventListener("copy",handleCopy)}},[selectedApiKey]);const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{codeData,languages,sdkTypes,isSinglePlainCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const codeData=[];const isSinglePlainCommand=childrenArray.length===1&&["language-shell","language-text"].some(lang=>isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes(lang));childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return;const codeLanguage=extractLanguageFromCode(codeElement);if(!codeLanguage)return;if(codeLanguage.startsWith("realtime_")){sdkTypes.add("realtime")}else if(codeLanguage.startsWith("rest_")){sdkTypes.add("rest")}if(!languages.includes(codeLanguage)){languages.push(codeLanguage)}const codeContent=codeElement.props.children;codeData.push({language:codeLanguage,content:codeContent})});return{codeData,languages,sdkTypes,isSinglePlainCommand}},[children,extractLanguageFromCode]);const resolvedSdk=useMemo(()=>{if(sdkTypes.size===1&&sdk&&!sdkTypes.has(sdk)){return Array.from(sdkTypes)[0]}return sdk??null},[sdk,sdkTypes]);const showSDKSelector=sdkTypes.size>0;const filteredLanguages=useMemo(()=>{const filtered=!resolvedSdk||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${resolvedSdk}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=stripSdkType(a);const bBase=stripSdkType(b);const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[resolvedSdk,showSDKSelector,languages,languageOrdering]);const activeLanguage=useMemo(()=>{if(resolvedSdk&&sdkTypes.has(resolvedSdk)){return`${resolvedSdk}_${lang}`}if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return languages[0]},[resolvedSdk,sdkTypes,lang,filteredLanguages,languages]);const requiresApiKeySubstitution=useMemo(()=>{const containsPlaceholder=codeData.some(code=>code?.content.includes("{{API_KEY}}"));return containsPlaceholder&&!!apiKeys&&apiKeys.length>0&&!!selectedApiKey},[codeData,apiKeys,selectedApiKey]);const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return codeData.filter(code=>{return code?.language===targetLanguage}).map(code=>{if(!code)return null;const cleanLang=hasOnlyJsonSnippet?"json":code.language;const langInfo=getLanguageInfo(cleanLang??"");if(typeof code.content==="string"||typeof code.content==="number"||typeof code.content==="boolean"){let processedContent=String(code.content);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}if(!langInfo.syntaxHighlighterKey||!cleanLang)return null;return React.createElement(Code,{key:code.language,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return null})},[activeLanguage,hasOnlyJsonSnippet,codeData,requiresApiKeySubstitution,showCodeLines,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return codeData.some(code=>{return code?.language===activeLanguage})},[activeLanguage,hasOnlyJsonSnippet,codeData]);const handleSDKTypeChange=useCallback(type=>{const nextLang=stripSdkType(languages.find(l=>l===`${type}_${stripSdkType(activeLanguage)}`)??languages.find(l=>l.startsWith(`${type}_`))??activeLanguage);if(onChange&&nextLang){onChange(stripSdkType(activeLanguage),type)}},[activeLanguage,languages,onChange]);const handleLanguageChange=useCallback(language=>{if(onChange){onChange(stripSdkType(language),resolvedSdk)}},[onChange,resolvedSdk]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguage)return()=>null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return()=>React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 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."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}return React.createElement(NoSnippetMessage,null)},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,NoSnippetMessage]);if(isSinglePlainCommand){const plainChild=codeData[0];if(plainChild){const codeContent=plainChild.content;const language=plainChild.language;if(!language||!codeContent)return null;let processedContent=String(codeContent);if(requiresApiKeySubstitution){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(PlainCodeView,{content:processedContent,className:className,language:language,icon:language==="shell"?"icon-gui-command-line-outline":null})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]",className)},headerRow&&React.createElement("div",{className:"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg"},React.createElement("div",{className:"flex space-x-1.5"},React.createElement("div",{className:"w-3 h-3 rounded-full bg-orange-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-3 h-3 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-12"})),showSDKSelector&&React.createElement("div",{className:cn("p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-3 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:resolvedSdk==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:resolvedSdk==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full",{"rounded-t-lg":!headerRow})},filteredLanguages.length>0&&React.createElement("div",{className:cn("inline-flex items-center",{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},React.createElement(Icon,{name:getLanguageInfo(filteredLanguages[0]).icon,size:"16px",additionalCSS:"mr-2"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageInfo(filteredLanguages[0]).label)))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,role:"button","aria-label":"Focusable code snippet area"},renderContent,isHovering&&activeLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=codeData.find(code=>code.language===activeLanguage)?.content;if(text)copy(substituteApiKey(text,selectedApiKey,false))},isCopied:isCopied})),requiresApiKeySubstitution&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:setSelectedApiKey}))};export default CodeSnippet;
2
2
  //# sourceMappingURL=CodeSnippet.js.map
package/core/CodeSnippet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n Children,\n isValidElement,\n useRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport { getLanguageInfo, stripSdkType } from \"./CodeSnippet/languages\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport PlainCodeView from \"./CodeSnippet/PlainCodeView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\nexport type SDKType = \"realtime\" | \"rest\" | null;\n\n// Define API key types\nexport type ApiKeysItem = {\n app: string;\n keys: { name: string; key: string }[];\n};\n\nexport type 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 | null;\n /**\n * Callback fired when the active language changes\n */\n onChange?: (language: string, sdk?: SDKType) => void;\n /**\n * List of API keys to display in a dropdown\n */\n apiKeys?: ApiKeysItem[];\n /**\n * Default SDK type to use for the code snippet\n */\n sdk?: SDKType;\n /**\n * Whether to show line numbers in code snippets\n */\n showCodeLines?: boolean;\n /**\n * Defines the order in which languages should be displayed.\n * Languages not in this array will be shown after those that are included.\n */\n languageOrdering?: string[];\n};\n\n// Substitution function for API key placeholders\nconst substituteApiKey = (\n content: string,\n apiKey: string,\n mask = true,\n): string => {\n return content.replace(\n /\\{\\{API_KEY\\}\\}/g,\n mask ? `${apiKey.split(\":\")[0]}:*****` : apiKey,\n );\n};\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n fixed = false,\n headerRow = false,\n title = \"Code\",\n children,\n className,\n lang,\n onChange,\n apiKeys,\n sdk,\n showCodeLines = true,\n languageOrdering,\n}) => {\n const codeRef = useRef<HTMLDivElement>(null);\n const { isCopied, copy } = useCopyToClipboard();\n\n const [selectedApiKey, setSelectedApiKey] = useState<string>(\n () => apiKeys?.[0]?.keys?.[0]?.key ?? \"\",\n );\n\n useEffect(() => {\n if (!selectedApiKey && apiKeys && apiKeys.length > 0) {\n setSelectedApiKey(apiKeys[0].keys?.[0]?.key);\n }\n }, [apiKeys, selectedApiKey]);\n\n useEffect(() => {\n const element = codeRef.current;\n if (!element) return;\n\n // Detects the key masking via substituteApiKey (i.e. \"abcde:*****\") and replaces it with the actual API key\n const unmaskRenderedApiKey = (content: string, apiKey: string): string => {\n return content.replace(/(['\"]?)([^:'\"]+):\\*{5}\\1/g, `$1${apiKey}$1`);\n };\n\n const handleCopy = (event: ClipboardEvent) => {\n const selection = window.getSelection();\n if (!selection || selection.rangeCount === 0) return;\n\n const selectedText = selection.toString();\n if (!selectedText) return;\n\n // Check if the selection is within our element\n const range = selection.getRangeAt(0);\n if (!element.contains(range.commonAncestorContainer)) return;\n\n const modifiedText = unmaskRenderedApiKey(selectedText, selectedApiKey);\n\n event.clipboardData?.setData(\"text/plain\", modifiedText);\n event.preventDefault();\n };\n\n document.addEventListener(\"copy\", handleCopy);\n\n return () => {\n document.removeEventListener(\"copy\", handleCopy);\n };\n }, [codeRef.current, selectedApiKey]);\n\n const extractLanguageFromCode = useCallback(\n (codeElement: React.ReactElement | null): string | null => {\n if (!codeElement || !codeElement.props.className) return null;\n\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return null;\n\n return langClass.substring(9); // Remove \"language-\" prefix\n },\n [],\n );\n\n const { codeData, languages, sdkTypes, isSinglePlainCommand } =\n useMemo(() => {\n const childrenArray = Children.toArray(children);\n const languages: string[] = [];\n const sdkTypes = new Set<SDKType>();\n const codeData: { language: string; content: string }[] = [];\n\n const isSinglePlainCommand =\n childrenArray.length === 1 &&\n [\"language-shell\", \"language-text\"].some(\n (lang) =>\n isValidElement(childrenArray[0]) &&\n isValidElement(childrenArray[0].props.children) &&\n childrenArray[0].props.children.props.className?.includes(lang),\n );\n\n childrenArray.forEach((child) => {\n if (!isValidElement(child)) return;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement) return;\n\n const codeLanguage = extractLanguageFromCode(codeElement);\n\n if (!codeLanguage) return;\n\n if (codeLanguage.startsWith(\"realtime_\")) {\n sdkTypes.add(\"realtime\");\n } else if (codeLanguage.startsWith(\"rest_\")) {\n sdkTypes.add(\"rest\");\n }\n\n if (!languages.includes(codeLanguage)) {\n languages.push(codeLanguage);\n }\n\n const codeContent = codeElement.props.children;\n codeData.push({ language: codeLanguage, content: codeContent });\n });\n\n return {\n codeData,\n languages,\n sdkTypes,\n isSinglePlainCommand,\n };\n }, [children, extractLanguageFromCode]);\n\n const resolvedSdk: SDKType = useMemo(() => {\n if (sdkTypes.size === 1 && sdk && !sdkTypes.has(sdk)) {\n return Array.from(sdkTypes)[0];\n }\n return sdk ?? null;\n }, [sdk, sdkTypes]);\n\n const showSDKSelector = sdkTypes.size > 0;\n\n const filteredLanguages = useMemo(() => {\n const filtered =\n !resolvedSdk || !showSDKSelector\n ? [...languages]\n : languages.filter((lang) => lang.startsWith(`${resolvedSdk}_`));\n\n // Apply custom ordering if provided\n if (languageOrdering && languageOrdering.length > 0) {\n filtered.sort((a, b) => {\n const aBase = stripSdkType(a);\n const bBase = stripSdkType(b);\n\n const aIndex = languageOrdering.indexOf(aBase);\n const bIndex = languageOrdering.indexOf(bBase);\n\n if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;\n if (aIndex !== -1) return -1;\n if (bIndex !== -1) return 1;\n return 0;\n });\n }\n\n return filtered;\n }, [resolvedSdk, showSDKSelector, languages, languageOrdering]);\n\n const activeLanguage = useMemo(() => {\n if (resolvedSdk && sdkTypes.has(resolvedSdk)) {\n return `${resolvedSdk}_${lang}`;\n }\n\n if (lang) return lang;\n\n if (filteredLanguages.length > 0) return filteredLanguages[0];\n\n return languages[0];\n }, [lang, resolvedSdk, sdkTypes, filteredLanguages]);\n\n const requiresApiKeySubstitution = useMemo(() => {\n const containsPlaceholder = codeData.some((code) =>\n code?.content.includes(\"{{API_KEY}}\"),\n );\n\n return (\n containsPlaceholder && !!apiKeys && apiKeys.length > 0 && !!selectedApiKey\n );\n }, [codeData, apiKeys, selectedApiKey]);\n\n const [isHovering, setIsHovering] = useState(false);\n\n const hasOnlyJsonSnippet = useMemo(\n () => languages.length === 1 && languages[0] === \"json\",\n [languages],\n );\n\n const processedChildren = useMemo(() => {\n if (!activeLanguage) return [];\n\n const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n return codeData\n .filter((code) => {\n return code?.language === targetLanguage;\n })\n .map((code) => {\n if (!code) return null;\n\n const cleanLang = hasOnlyJsonSnippet ? \"json\" : code.language;\n const langInfo = getLanguageInfo(cleanLang ?? \"\");\n\n if (\n typeof code.content === \"string\" ||\n typeof code.content === \"number\" ||\n typeof code.content === \"boolean\"\n ) {\n // Apply API key substitution if apiKeys are provided\n let processedContent = String(code.content);\n if (requiresApiKeySubstitution) {\n processedContent = substituteApiKey(\n processedContent,\n selectedApiKey,\n );\n }\n\n if (!langInfo.syntaxHighlighterKey || !cleanLang) return null;\n\n return (\n <Code\n key={code.language}\n language={langInfo.syntaxHighlighterKey || cleanLang}\n snippet={processedContent}\n additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4\"\n showLines={showCodeLines}\n />\n );\n }\n\n return null;\n });\n }, [\n activeLanguage,\n codeData,\n hasOnlyJsonSnippet,\n showCodeLines,\n apiKeys,\n selectedApiKey,\n ]);\n\n const hasSnippetForActiveLanguage = useMemo(() => {\n if (!activeLanguage) return false;\n if (hasOnlyJsonSnippet) return true;\n\n return codeData.some((code) => {\n return code?.language === activeLanguage;\n });\n }, [activeLanguage, hasOnlyJsonSnippet, codeData]);\n\n const handleSDKTypeChange = useCallback(\n (type: SDKType) => {\n const nextLang = stripSdkType(\n languages.find(\n (l) => l === `${type}_${stripSdkType(activeLanguage)}`,\n ) ??\n languages.find((l) => l.startsWith(`${type}_`)) ??\n activeLanguage,\n );\n\n if (onChange && nextLang) {\n onChange(stripSdkType(activeLanguage), type);\n }\n },\n [languages],\n );\n\n const handleLanguageChange = useCallback(\n (language: string) => {\n if (onChange) {\n onChange(stripSdkType(language), resolvedSdk);\n }\n },\n [onChange, resolvedSdk],\n );\n\n const NoSnippetMessage = useMemo(() => {\n if (!activeLanguage) return () => null;\n\n const activeLanguageInfo = getLanguageInfo(activeLanguage);\n\n return () => (\n <div className=\"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 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 }, [activeLanguage]);\n\n const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n const showFullSelector = filteredLanguages.length > 1;\n\n const renderContent = useMemo(() => {\n if (!activeLanguage) return null;\n\n if (hasSnippetForActiveLanguage) {\n return processedChildren;\n }\n\n return <NoSnippetMessage />;\n }, [\n activeLanguage,\n hasSnippetForActiveLanguage,\n processedChildren,\n NoSnippetMessage,\n ]);\n\n // Render special case for plain commands (shell or text)\n if (isSinglePlainCommand) {\n const plainChild = codeData[0];\n if (plainChild) {\n const codeContent = plainChild.content;\n const language = plainChild.language;\n\n if (!language || !codeContent) return null;\n\n // Apply API key substitution if apiKeys are provided\n let processedContent = String(codeContent);\n if (requiresApiKeySubstitution) {\n processedContent = substituteApiKey(processedContent, selectedApiKey);\n }\n\n return (\n <PlainCodeView\n content={processedContent}\n className={className}\n language={language}\n icon={language === \"shell\" ? \"icon-gui-command-line-outline\" : null}\n />\n );\n }\n }\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]\",\n className,\n )}\n >\n {headerRow && (\n <div className=\"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg\">\n <div className=\"flex space-x-1.5\">\n <div className=\"w-3 h-3 rounded-full bg-orange-500\"></div>\n <div className=\"w-3 h-3 rounded-full bg-yellow-500\"></div>\n <div className=\"w-3 h-3 rounded-full bg-green-500\"></div>\n </div>\n\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-12\"></div>\n </div>\n )}\n {showSDKSelector && (\n <div\n className={cn(\n \"p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n <div className=\"flex gap-3 justify-start\">\n {sdkTypes.has(\"realtime\") && (\n <TooltipButton\n tooltip=\"Realtime SDK\"\n active={resolvedSdk === \"realtime\"}\n onClick={() => handleSDKTypeChange(\"realtime\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n Realtime\n </TooltipButton>\n )}\n\n {sdkTypes.has(\"rest\") && (\n <TooltipButton\n tooltip=\"REST SDK\"\n active={resolvedSdk === \"rest\"}\n onClick={() => handleSDKTypeChange(\"rest\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n REST\n </TooltipButton>\n )}\n </div>\n </div>\n )}\n\n {showLanguageSelector &&\n (showFullSelector ? (\n <LanguageSelector\n languages={filteredLanguages}\n activeLanguage={activeLanguage}\n onLanguageChange={handleLanguageChange}\n />\n ) : (\n <div\n className={cn(\n \"border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full\",\n { \"rounded-t-lg\": !headerRow },\n )}\n >\n {filteredLanguages.length > 0 && (\n <div\n className={cn(\"inline-flex items-center\", {\n \"cursor-pointer\": filteredLanguages.length > 0,\n })}\n {...(filteredLanguages.length > 0 && {\n onClick: () => handleLanguageChange(filteredLanguages[0]),\n })}\n >\n <Icon\n name={getLanguageInfo(filteredLanguages[0]).icon}\n size=\"16px\"\n additionalCSS=\"mr-2\"\n />\n <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n {getLanguageInfo(filteredLanguages[0]).label}\n </span>\n </div>\n )}\n </div>\n ))}\n <div\n ref={codeRef}\n className=\"relative\"\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n >\n {renderContent}\n {isHovering && activeLanguage && (\n <CopyButton\n onCopy={() => {\n const text = codeData.find(\n (code) => code.language === activeLanguage,\n )?.content;\n if (text) copy(substituteApiKey(text, selectedApiKey, false));\n }}\n isCopied={isCopied}\n />\n )}\n </div>\n {requiresApiKeySubstitution && (\n <ApiKeySelector\n apiKeys={apiKeys}\n selectedApiKey={selectedApiKey}\n onApiKeyChange={setSelectedApiKey}\n />\n )}\n </div>\n );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","Icon","getLanguageInfo","stripSdkType","LanguageSelector","ApiKeySelector","useCopyToClipboard","PlainCodeView","CopyButton","TooltipButton","substituteApiKey","content","apiKey","mask","replace","split","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","selectedApiKey","setSelectedApiKey","keys","key","length","element","current","unmaskRenderedApiKey","handleCopy","event","selection","window","getSelection","rangeCount","selectedText","toString","range","getRangeAt","contains","commonAncestorContainer","modifiedText","clipboardData","setData","preventDefault","document","addEventListener","removeEventListener","extractLanguageFromCode","codeElement","props","classNames","langClass","find","cls","startsWith","substring","codeData","languages","sdkTypes","isSinglePlainCommand","childrenArray","toArray","Set","some","includes","forEach","child","preElement","codeLanguage","add","push","codeContent","language","resolvedSdk","size","has","Array","from","showSDKSelector","filteredLanguages","filtered","filter","sort","a","b","aBase","bBase","aIndex","indexOf","bIndex","activeLanguage","requiresApiKeySubstitution","containsPlaceholder","code","isHovering","setIsHovering","hasOnlyJsonSnippet","processedChildren","targetLanguage","map","cleanLang","langInfo","processedContent","String","syntaxHighlighterKey","snippet","additionalCSS","showLines","hasSnippetForActiveLanguage","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","NoSnippetMessage","activeLanguageInfo","div","name","color","p","label","showLanguageSelector","showFullSelector","renderContent","plainChild","icon","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"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"}
1
+ {"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n Children,\n isValidElement,\n useRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport { getLanguageInfo, stripSdkType } from \"./CodeSnippet/languages\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport PlainCodeView from \"./CodeSnippet/PlainCodeView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\n\n// Define SDK type\nexport type SDKType = \"realtime\" | \"rest\" | null;\n\n// Define API key types\nexport type ApiKeysItem = {\n app: string;\n keys: { name: string; key: string }[];\n};\n\nexport type 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 | null;\n /**\n * Callback fired when the active language changes\n */\n onChange?: (language: string, sdk?: SDKType) => void;\n /**\n * List of API keys to display in a dropdown\n */\n apiKeys?: ApiKeysItem[];\n /**\n * Default SDK type to use for the code snippet\n */\n sdk?: SDKType;\n /**\n * Whether to show line numbers in code snippets\n */\n showCodeLines?: boolean;\n /**\n * Defines the order in which languages should be displayed.\n * Languages not in this array will be shown after those that are included.\n */\n languageOrdering?: string[];\n};\n\n// Substitution function for API key placeholders\nconst substituteApiKey = (\n content: string,\n apiKey: string,\n mask = true,\n): string => {\n return content.replace(\n /\\{\\{API_KEY\\}\\}/g,\n mask ? `${apiKey.split(\":\")[0]}:*****` : apiKey,\n );\n};\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n fixed = false,\n headerRow = false,\n title = \"Code\",\n children,\n className,\n lang,\n onChange,\n apiKeys,\n sdk,\n showCodeLines = true,\n languageOrdering,\n}) => {\n const codeRef = useRef<HTMLDivElement>(null);\n const { isCopied, copy } = useCopyToClipboard();\n\n const [selectedApiKey, setSelectedApiKey] = useState<string>(\n () => apiKeys?.[0]?.keys?.[0]?.key ?? \"\",\n );\n\n useEffect(() => {\n if (!selectedApiKey && apiKeys && apiKeys.length > 0) {\n setSelectedApiKey(apiKeys[0].keys?.[0]?.key);\n }\n }, [apiKeys, selectedApiKey]);\n\n useEffect(() => {\n const element = codeRef.current;\n if (!element) return;\n\n // Detects the key masking via substituteApiKey (i.e. \"abcde:*****\") and replaces it with the actual API key\n const unmaskRenderedApiKey = (content: string, apiKey: string): string => {\n return content.replace(/(['\"]?)([^:'\"]+):\\*{5}\\1/g, `$1${apiKey}$1`);\n };\n\n const handleCopy = (event: ClipboardEvent) => {\n const selection = window.getSelection();\n if (!selection || selection.rangeCount === 0) return;\n\n const selectedText = selection.toString();\n if (!selectedText) return;\n\n // Check if the selection is within our element\n const range = selection.getRangeAt(0);\n if (!element.contains(range.commonAncestorContainer)) return;\n\n const modifiedText = unmaskRenderedApiKey(selectedText, selectedApiKey);\n\n event.clipboardData?.setData(\"text/plain\", modifiedText);\n event.preventDefault();\n };\n\n document.addEventListener(\"copy\", handleCopy);\n\n return () => {\n document.removeEventListener(\"copy\", handleCopy);\n };\n }, [selectedApiKey]);\n\n const extractLanguageFromCode = useCallback(\n (codeElement: React.ReactElement | null): string | null => {\n if (!codeElement || !codeElement.props.className) return null;\n\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return null;\n\n return langClass.substring(9); // Remove \"language-\" prefix\n },\n [],\n );\n\n const { codeData, languages, sdkTypes, isSinglePlainCommand } =\n useMemo(() => {\n const childrenArray = Children.toArray(children);\n const languages: string[] = [];\n const sdkTypes = new Set<SDKType>();\n const codeData: { language: string; content: string }[] = [];\n\n const isSinglePlainCommand =\n childrenArray.length === 1 &&\n [\"language-shell\", \"language-text\"].some(\n (lang) =>\n isValidElement(childrenArray[0]) &&\n isValidElement(childrenArray[0].props.children) &&\n childrenArray[0].props.children.props.className?.includes(lang),\n );\n\n childrenArray.forEach((child) => {\n if (!isValidElement(child)) return;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n if (!codeElement) return;\n\n const codeLanguage = extractLanguageFromCode(codeElement);\n\n if (!codeLanguage) return;\n\n if (codeLanguage.startsWith(\"realtime_\")) {\n sdkTypes.add(\"realtime\");\n } else if (codeLanguage.startsWith(\"rest_\")) {\n sdkTypes.add(\"rest\");\n }\n\n if (!languages.includes(codeLanguage)) {\n languages.push(codeLanguage);\n }\n\n const codeContent = codeElement.props.children;\n codeData.push({ language: codeLanguage, content: codeContent });\n });\n\n return {\n codeData,\n languages,\n sdkTypes,\n isSinglePlainCommand,\n };\n }, [children, extractLanguageFromCode]);\n\n const resolvedSdk: SDKType = useMemo(() => {\n if (sdkTypes.size === 1 && sdk && !sdkTypes.has(sdk)) {\n return Array.from(sdkTypes)[0];\n }\n return sdk ?? null;\n }, [sdk, sdkTypes]);\n\n const showSDKSelector = sdkTypes.size > 0;\n\n const filteredLanguages = useMemo(() => {\n const filtered =\n !resolvedSdk || !showSDKSelector\n ? [...languages]\n : languages.filter((lang) => lang.startsWith(`${resolvedSdk}_`));\n\n // Apply custom ordering if provided\n if (languageOrdering && languageOrdering.length > 0) {\n filtered.sort((a, b) => {\n const aBase = stripSdkType(a);\n const bBase = stripSdkType(b);\n\n const aIndex = languageOrdering.indexOf(aBase);\n const bIndex = languageOrdering.indexOf(bBase);\n\n if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;\n if (aIndex !== -1) return -1;\n if (bIndex !== -1) return 1;\n return 0;\n });\n }\n\n return filtered;\n }, [resolvedSdk, showSDKSelector, languages, languageOrdering]);\n\n const activeLanguage = useMemo(() => {\n if (resolvedSdk && sdkTypes.has(resolvedSdk)) {\n return `${resolvedSdk}_${lang}`;\n }\n\n if (lang) return lang;\n\n if (filteredLanguages.length > 0) return filteredLanguages[0];\n\n return languages[0];\n }, [resolvedSdk, sdkTypes, lang, filteredLanguages, languages]);\n\n const requiresApiKeySubstitution = useMemo(() => {\n const containsPlaceholder = codeData.some((code) =>\n code?.content.includes(\"{{API_KEY}}\"),\n );\n\n return (\n containsPlaceholder && !!apiKeys && apiKeys.length > 0 && !!selectedApiKey\n );\n }, [codeData, apiKeys, selectedApiKey]);\n\n const [isHovering, setIsHovering] = useState(false);\n\n const hasOnlyJsonSnippet = useMemo(\n () => languages.length === 1 && languages[0] === \"json\",\n [languages],\n );\n\n const processedChildren = useMemo(() => {\n if (!activeLanguage) return [];\n\n const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n return codeData\n .filter((code) => {\n return code?.language === targetLanguage;\n })\n .map((code) => {\n if (!code) return null;\n\n const cleanLang = hasOnlyJsonSnippet ? \"json\" : code.language;\n const langInfo = getLanguageInfo(cleanLang ?? \"\");\n\n if (\n typeof code.content === \"string\" ||\n typeof code.content === \"number\" ||\n typeof code.content === \"boolean\"\n ) {\n // Apply API key substitution if apiKeys are provided\n let processedContent = String(code.content);\n if (requiresApiKeySubstitution) {\n processedContent = substituteApiKey(\n processedContent,\n selectedApiKey,\n );\n }\n\n if (!langInfo.syntaxHighlighterKey || !cleanLang) return null;\n\n return (\n <Code\n key={code.language}\n language={langInfo.syntaxHighlighterKey || cleanLang}\n snippet={processedContent}\n additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4\"\n showLines={showCodeLines}\n />\n );\n }\n\n return null;\n });\n }, [\n activeLanguage,\n hasOnlyJsonSnippet,\n codeData,\n requiresApiKeySubstitution,\n showCodeLines,\n selectedApiKey,\n ]);\n\n const hasSnippetForActiveLanguage = useMemo(() => {\n if (!activeLanguage) return false;\n if (hasOnlyJsonSnippet) return true;\n\n return codeData.some((code) => {\n return code?.language === activeLanguage;\n });\n }, [activeLanguage, hasOnlyJsonSnippet, codeData]);\n\n const handleSDKTypeChange = useCallback(\n (type: SDKType) => {\n const nextLang = stripSdkType(\n languages.find(\n (l) => l === `${type}_${stripSdkType(activeLanguage)}`,\n ) ??\n languages.find((l) => l.startsWith(`${type}_`)) ??\n activeLanguage,\n );\n\n if (onChange && nextLang) {\n onChange(stripSdkType(activeLanguage), type);\n }\n },\n [activeLanguage, languages, onChange],\n );\n\n const handleLanguageChange = useCallback(\n (language: string) => {\n if (onChange) {\n onChange(stripSdkType(language), resolvedSdk);\n }\n },\n [onChange, resolvedSdk],\n );\n\n const NoSnippetMessage = useMemo(() => {\n if (!activeLanguage) return () => null;\n\n const activeLanguageInfo = getLanguageInfo(activeLanguage);\n\n return () => (\n <div className=\"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 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 }, [activeLanguage]);\n\n const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n const showFullSelector = filteredLanguages.length > 1;\n\n const renderContent = useMemo(() => {\n if (!activeLanguage) return null;\n\n if (hasSnippetForActiveLanguage) {\n return processedChildren;\n }\n\n return <NoSnippetMessage />;\n }, [\n activeLanguage,\n hasSnippetForActiveLanguage,\n processedChildren,\n NoSnippetMessage,\n ]);\n\n // Render special case for plain commands (shell or text)\n if (isSinglePlainCommand) {\n const plainChild = codeData[0];\n if (plainChild) {\n const codeContent = plainChild.content;\n const language = plainChild.language;\n\n if (!language || !codeContent) return null;\n\n // Apply API key substitution if apiKeys are provided\n let processedContent = String(codeContent);\n if (requiresApiKeySubstitution) {\n processedContent = substituteApiKey(processedContent, selectedApiKey);\n }\n\n return (\n <PlainCodeView\n content={processedContent}\n className={className}\n language={language}\n icon={language === \"shell\" ? \"icon-gui-command-line-outline\" : null}\n />\n );\n }\n }\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]\",\n className,\n )}\n >\n {headerRow && (\n <div className=\"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg\">\n <div className=\"flex space-x-1.5\">\n <div className=\"w-3 h-3 rounded-full bg-orange-500\"></div>\n <div className=\"w-3 h-3 rounded-full bg-yellow-500\"></div>\n <div className=\"w-3 h-3 rounded-full bg-green-500\"></div>\n </div>\n\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-12\"></div>\n </div>\n )}\n {showSDKSelector && (\n <div\n className={cn(\n \"p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n <div className=\"flex gap-3 justify-start\">\n {sdkTypes.has(\"realtime\") && (\n <TooltipButton\n tooltip=\"Realtime SDK\"\n active={resolvedSdk === \"realtime\"}\n onClick={() => handleSDKTypeChange(\"realtime\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n Realtime\n </TooltipButton>\n )}\n\n {sdkTypes.has(\"rest\") && (\n <TooltipButton\n tooltip=\"REST SDK\"\n active={resolvedSdk === \"rest\"}\n onClick={() => handleSDKTypeChange(\"rest\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n REST\n </TooltipButton>\n )}\n </div>\n </div>\n )}\n\n {showLanguageSelector &&\n (showFullSelector ? (\n <LanguageSelector\n languages={filteredLanguages}\n activeLanguage={activeLanguage}\n onLanguageChange={handleLanguageChange}\n />\n ) : (\n <div\n className={cn(\n \"border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3 w-full\",\n { \"rounded-t-lg\": !headerRow },\n )}\n >\n {filteredLanguages.length > 0 && (\n <div\n className={cn(\"inline-flex items-center\", {\n \"cursor-pointer\": filteredLanguages.length > 0,\n })}\n {...(filteredLanguages.length > 0 && {\n onClick: () => handleLanguageChange(filteredLanguages[0]),\n })}\n >\n <Icon\n name={getLanguageInfo(filteredLanguages[0]).icon}\n size=\"16px\"\n additionalCSS=\"mr-2\"\n />\n <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n {getLanguageInfo(filteredLanguages[0]).label}\n </span>\n </div>\n )}\n </div>\n ))}\n <div\n ref={codeRef}\n className=\"relative\"\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n role=\"button\"\n aria-label=\"Focusable code snippet area\"\n >\n {renderContent}\n {isHovering && activeLanguage && (\n <CopyButton\n onCopy={() => {\n const text = codeData.find(\n (code) => code.language === activeLanguage,\n )?.content;\n if (text) copy(substituteApiKey(text, selectedApiKey, false));\n }}\n isCopied={isCopied}\n />\n )}\n </div>\n {requiresApiKeySubstitution && (\n <ApiKeySelector\n apiKeys={apiKeys}\n selectedApiKey={selectedApiKey}\n onApiKeyChange={setSelectedApiKey}\n />\n )}\n </div>\n );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","Icon","getLanguageInfo","stripSdkType","LanguageSelector","ApiKeySelector","useCopyToClipboard","PlainCodeView","CopyButton","TooltipButton","substituteApiKey","content","apiKey","mask","replace","split","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","selectedApiKey","setSelectedApiKey","keys","key","length","element","current","unmaskRenderedApiKey","handleCopy","event","selection","window","getSelection","rangeCount","selectedText","toString","range","getRangeAt","contains","commonAncestorContainer","modifiedText","clipboardData","setData","preventDefault","document","addEventListener","removeEventListener","extractLanguageFromCode","codeElement","props","classNames","langClass","find","cls","startsWith","substring","codeData","languages","sdkTypes","isSinglePlainCommand","childrenArray","toArray","Set","some","includes","forEach","child","preElement","codeLanguage","add","push","codeContent","language","resolvedSdk","size","has","Array","from","showSDKSelector","filteredLanguages","filtered","filter","sort","a","b","aBase","bBase","aIndex","indexOf","bIndex","activeLanguage","requiresApiKeySubstitution","containsPlaceholder","code","isHovering","setIsHovering","hasOnlyJsonSnippet","processedChildren","targetLanguage","map","cleanLang","langInfo","processedContent","String","syntaxHighlighterKey","snippet","additionalCSS","showLines","hasSnippetForActiveLanguage","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","NoSnippetMessage","activeLanguageInfo","div","name","color","p","label","showLanguageSelector","showFullSelector","renderContent","plainChild","icon","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","role","aria-label","onCopy","text","onApiKeyChange"],"mappings":"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"}
package/core/ConnectStateWrapper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/ConnectStateWrapper.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { connectState, getRemoteDataStore } from \"./remote-data-store\";\n\n/*\n Connect a react component to a global store.\n This is similar to what react-redux does but uses our global store so\n can share state with other React mount points or anything that uses the\n store.\n - selectors is an object where keys are your prop names and values are your select\n functions that work on the store to retrieve the state you are interested in\n - initial state is set in useEffect so the wrapped component needs to handle it's props set to undefined initially\n*/\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst ConnectStateWrapper = (Component: any, selectors: any) => {\n const [state, setState] = useState({});\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setStateForKey = (key: string) => (storeState: any) =>\n setState(() => ({ [key]: storeState }));\n\n useEffect(() => {\n const store = getRemoteDataStore();\n const resolvedState = Object.keys(selectors).reduce(\n (acc, key) => ({ ...acc, [key]: selectors[key](store) }),\n {},\n );\n\n // Set initial state\n setState(resolvedState);\n\n // Create a store subscription for each selector. Depending on your use case, this can be inefficient.\n // When optimising for renders, look for wins with selectors better for your use and using connectState directly.\n Object.keys(selectors).forEach((key) => {\n connectState(selectors[key], setStateForKey(key));\n });\n }, []);\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const WrappedComponent = (props: any) => <Component {...props} {...state} />;\n\n return WrappedComponent;\n};\n\nexport default ConnectStateWrapper;\n"],"names":["React","useEffect","useState","connectState","getRemoteDataStore","ConnectStateWrapper","Component","selectors","state","setState","setStateForKey","key","storeState","store","resolvedState","Object","keys","reduce","acc","forEach","WrappedComponent","props"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,QAAQ,KAAQ,OAAQ,AAEnD,QAASC,YAAY,CAAEC,kBAAkB,KAAQ,qBAAsB,CAavE,MAAMC,oBAAsB,CAACC,UAAgBC,aAC3C,KAAM,CAACC,MAAOC,SAAS,CAAGP,SAAS,CAAC,GAGpC,MAAMQ,eAAiB,AAACC,KAAgB,AAACC,YACvCH,SAAS,IAAO,CAAA,CAAE,CAACE,IAAI,CAAEC,UAAW,CAAA,GAEtCX,UAAU,KACR,MAAMY,MAAQT,qBACd,MAAMU,cAAgBC,OAAOC,IAAI,CAACT,WAAWU,MAAM,CACjD,CAACC,IAAKP,MAAS,CAAA,CAAE,GAAGO,GAAG,CAAE,CAACP,IAAI,CAAEJ,SAAS,CAACI,IAAI,CAACE,MAAO,CAAA,EACtD,CAAC,GAIHJ,SAASK,eAITC,OAAOC,IAAI,CAACT,WAAWY,OAAO,CAAC,AAACR,MAC9BR,aAAaI,SAAS,CAACI,IAAI,CAAED,eAAeC,KAC9C,EACF,EAAG,EAAE,EAGL,MAAMS,iBAAmB,AAACC,OAAe,oBAACf,WAAW,GAAGe,KAAK,CAAG,GAAGb,KAAK,GAExE,OAAOY,gBACT,CAEA,gBAAef,mBAAoB"}
1
+ {"version":3,"sources":["../../src/core/ConnectStateWrapper.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport { connectState, getRemoteDataStore } from \"./remote-data-store\";\n\n/*\n Connect a react component to a global store.\n This is similar to what react-redux does but uses our global store so\n can share state with other React mount points or anything that uses the\n store.\n - selectors is an object where keys are your prop names and values are your select\n functions that work on the store to retrieve the state you are interested in\n - initial state is set in useEffect so the wrapped component needs to handle it's props set to undefined initially\n*/\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst ConnectStateWrapper = (Component: any, selectors: any) => {\n const [state, setState] = useState({});\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const setStateForKey = (key: string) => (storeState: any) =>\n setState(() => ({ [key]: storeState }));\n\n useEffect(() => {\n const store = getRemoteDataStore();\n const resolvedState = Object.keys(selectors).reduce(\n (acc, key) => ({ ...acc, [key]: selectors[key](store) }),\n {},\n );\n\n // Set initial state\n setState(resolvedState);\n\n // Create a store subscription for each selector. Depending on your use case, this can be inefficient.\n // When optimising for renders, look for wins with selectors better for your use and using connectState directly.\n Object.keys(selectors).forEach((key) => {\n connectState(selectors[key], setStateForKey(key));\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const WrappedComponent = (props: any) => <Component {...props} {...state} />;\n\n return WrappedComponent;\n};\n\nexport default ConnectStateWrapper;\n"],"names":["React","useEffect","useState","connectState","getRemoteDataStore","ConnectStateWrapper","Component","selectors","state","setState","setStateForKey","key","storeState","store","resolvedState","Object","keys","reduce","acc","forEach","WrappedComponent","props"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,QAAQ,KAAQ,OAAQ,AAEnD,QAASC,YAAY,CAAEC,kBAAkB,KAAQ,qBAAsB,CAavE,MAAMC,oBAAsB,CAACC,UAAgBC,aAC3C,KAAM,CAACC,MAAOC,SAAS,CAAGP,SAAS,CAAC,GAGpC,MAAMQ,eAAiB,AAACC,KAAgB,AAACC,YACvCH,SAAS,IAAO,CAAA,CAAE,CAACE,IAAI,CAAEC,UAAW,CAAA,GAEtCX,UAAU,KACR,MAAMY,MAAQT,qBACd,MAAMU,cAAgBC,OAAOC,IAAI,CAACT,WAAWU,MAAM,CACjD,CAACC,IAAKP,MAAS,CAAA,CAAE,GAAGO,GAAG,CAAE,CAACP,IAAI,CAAEJ,SAAS,CAACI,IAAI,CAACE,MAAO,CAAA,EACtD,CAAC,GAIHJ,SAASK,eAITC,OAAOC,IAAI,CAACT,WAAWY,OAAO,CAAC,AAACR,MAC9BR,aAAaI,SAAS,CAACI,IAAI,CAAED,eAAeC,KAC9C,EAEF,EAAG,EAAE,EAGL,MAAMS,iBAAmB,AAACC,OAAe,oBAACf,WAAW,GAAGe,KAAK,CAAG,GAAGb,KAAK,GAExE,OAAOY,gBACT,CAEA,gBAAef,mBAAoB"}
package/core/CookieMessage.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import _absUrl from"./url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[]);const handleClose=()=>{Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});ref.current?.classList.add("bottom-px","opacity-0");setTimeout(()=>setHideCookieMessage(true),500)};const absUrl=path=>_absUrl(path,urlBase);if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-8"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-3 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;
1
+ import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import _absUrl from"./url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[cookieId]);const handleClose=()=>{Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});ref.current?.classList.add("bottom-px","opacity-0");setTimeout(()=>setHideCookieMessage(true),500)};const absUrl=path=>_absUrl(path,urlBase);if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-8"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-3 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;
2
2
  //# sourceMappingURL=CookieMessage.js.map
package/core/CookieMessage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/CookieMessage.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from \"react\";\nimport Cookie from \"js-cookie\";\n\nimport _absUrl from \"./url-base\";\n\nconst COOKIE_EXPIRY = 365;\n\ntype CookieMessageProps = {\n cookieId: string;\n urlBase: string;\n};\n\nconst CookieMessage = ({ cookieId, urlBase }: CookieMessageProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const [hideCookieMessage, setHideCookieMessage] = useState(true);\n\n useEffect(() => {\n const isCookieSet = Cookie.get(cookieId) ? true : false;\n setHideCookieMessage(isCookieSet);\n }, []);\n\n const handleClose = () => {\n Cookie.set(cookieId, \"1\", { expires: COOKIE_EXPIRY });\n\n ref.current?.classList.add(\"bottom-px\", \"opacity-0\");\n setTimeout(() => setHideCookieMessage(true), 500);\n };\n\n const absUrl = (path: string) => _absUrl(path, urlBase);\n\n // Presume the message is hidden by default\n if (hideCookieMessage) return null;\n\n return (\n <div className=\"ui-cookie-message\" ref={ref}>\n <p className=\"ui-text-p2 pr-8\">\n <a href={absUrl(\"/privacy\")} className=\"underline\">\n How we use cookies\n </a>{\" \"}\n to improve your experience.\n </p>\n <button\n className=\"ui-btn-secondary mt-3 sm:mt-0 whitespace-nowrap\"\n onClick={handleClose}\n >\n Accept and close\n </button>\n </div>\n );\n};\n\nexport default CookieMessage;\n"],"names":["React","useRef","useEffect","useState","Cookie","_absUrl","COOKIE_EXPIRY","CookieMessage","cookieId","urlBase","ref","hideCookieMessage","setHideCookieMessage","isCookieSet","get","handleClose","set","expires","current","classList","add","setTimeout","absUrl","path","div","className","p","a","href","button","onClick"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,SAAS,CAAEC,QAAQ,KAAQ,OAAQ,AAC3D,QAAOC,WAAY,WAAY,AAE/B,QAAOC,YAAa,YAAa,CAEjC,MAAMC,cAAgB,IAOtB,MAAMC,cAAgB,CAAC,CAAEC,QAAQ,CAAEC,OAAO,CAAsB,IAC9D,MAAMC,IAAMT,OAAuB,MACnC,KAAM,CAACU,kBAAmBC,qBAAqB,CAAGT,SAAS,MAE3DD,UAAU,KACR,MAAMW,YAAcT,OAAOU,GAAG,CAACN,UAAY,KAAO,MAClDI,qBAAqBC,YACvB,EAAG,EAAE,EAEL,MAAME,YAAc,KAClBX,OAAOY,GAAG,CAACR,SAAU,IAAK,CAAES,QAASX,aAAc,EAEnDI,CAAAA,IAAIQ,OAAO,EAAEC,UAAUC,IAAI,YAAa,aACxCC,WAAW,IAAMT,qBAAqB,MAAO,IAC/C,EAEA,MAAMU,OAAS,AAACC,MAAiBlB,QAAQkB,KAAMd,SAG/C,GAAIE,kBAAmB,OAAO,KAE9B,OACE,oBAACa,OAAIC,UAAU,oBAAoBf,IAAKA,KACtC,oBAACgB,KAAED,UAAU,mBACX,oBAACE,KAAEC,KAAMN,OAAO,YAAaG,UAAU,aAAY,sBAE9C,IAAI,+BAGX,oBAACI,UACCJ,UAAU,kDACVK,QAASf,aACV,oBAKP,CAEA,gBAAeR,aAAc"}
1
+ {"version":3,"sources":["../../src/core/CookieMessage.tsx"],"sourcesContent":["import React, { useRef, useEffect, useState } from \"react\";\nimport Cookie from \"js-cookie\";\n\nimport _absUrl from \"./url-base\";\n\nconst COOKIE_EXPIRY = 365;\n\ntype CookieMessageProps = {\n cookieId: string;\n urlBase: string;\n};\n\nconst CookieMessage = ({ cookieId, urlBase }: CookieMessageProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const [hideCookieMessage, setHideCookieMessage] = useState(true);\n\n useEffect(() => {\n const isCookieSet = Cookie.get(cookieId) ? true : false;\n setHideCookieMessage(isCookieSet);\n }, [cookieId]);\n\n const handleClose = () => {\n Cookie.set(cookieId, \"1\", { expires: COOKIE_EXPIRY });\n\n ref.current?.classList.add(\"bottom-px\", \"opacity-0\");\n setTimeout(() => setHideCookieMessage(true), 500);\n };\n\n const absUrl = (path: string) => _absUrl(path, urlBase);\n\n // Presume the message is hidden by default\n if (hideCookieMessage) return null;\n\n return (\n <div className=\"ui-cookie-message\" ref={ref}>\n <p className=\"ui-text-p2 pr-8\">\n <a href={absUrl(\"/privacy\")} className=\"underline\">\n How we use cookies\n </a>{\" \"}\n to improve your experience.\n </p>\n <button\n className=\"ui-btn-secondary mt-3 sm:mt-0 whitespace-nowrap\"\n onClick={handleClose}\n >\n Accept and close\n </button>\n </div>\n );\n};\n\nexport default CookieMessage;\n"],"names":["React","useRef","useEffect","useState","Cookie","_absUrl","COOKIE_EXPIRY","CookieMessage","cookieId","urlBase","ref","hideCookieMessage","setHideCookieMessage","isCookieSet","get","handleClose","set","expires","current","classList","add","setTimeout","absUrl","path","div","className","p","a","href","button","onClick"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,SAAS,CAAEC,QAAQ,KAAQ,OAAQ,AAC3D,QAAOC,WAAY,WAAY,AAE/B,QAAOC,YAAa,YAAa,CAEjC,MAAMC,cAAgB,IAOtB,MAAMC,cAAgB,CAAC,CAAEC,QAAQ,CAAEC,OAAO,CAAsB,IAC9D,MAAMC,IAAMT,OAAuB,MACnC,KAAM,CAACU,kBAAmBC,qBAAqB,CAAGT,SAAS,MAE3DD,UAAU,KACR,MAAMW,YAAcT,OAAOU,GAAG,CAACN,UAAY,KAAO,MAClDI,qBAAqBC,YACvB,EAAG,CAACL,SAAS,EAEb,MAAMO,YAAc,KAClBX,OAAOY,GAAG,CAACR,SAAU,IAAK,CAAES,QAASX,aAAc,EAEnDI,CAAAA,IAAIQ,OAAO,EAAEC,UAAUC,IAAI,YAAa,aACxCC,WAAW,IAAMT,qBAAqB,MAAO,IAC/C,EAEA,MAAMU,OAAS,AAACC,MAAiBlB,QAAQkB,KAAMd,SAG/C,GAAIE,kBAAmB,OAAO,KAE9B,OACE,oBAACa,OAAIC,UAAU,oBAAoBf,IAAKA,KACtC,oBAACgB,KAAED,UAAU,mBACX,oBAACE,KAAEC,KAAMN,OAAO,YAAaG,UAAU,aAAY,sBAE9C,IAAI,+BAGX,oBAACI,UACCJ,UAAU,kDACVK,QAASf,aACV,oBAKP,CAEA,gBAAeR,aAAc"}
package/core/DropdownMenu.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";import cn from"./utils/cn";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{if(ref.current?.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>document.removeEventListener("click",clickHandler)},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,triggerClassNames="",description})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger","aria-label":description,role:"button",onClick:()=>setOpen(!isOpen),className:cn("flex items-center ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 focus:outline-none",triggerClassNames)},children,React.createElement(Icon,{name:isOpen?"icon-gui-chevron-up-mini":"icon-gui-chevron-down-mini",size:"1.25rem",additionalCSS:"text-neutral-1300 dark:text-neutral-000"}))};const Content=({children,anchorPosition="right",contentClassNames})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}return React.createElement("div",{id:"menu-content",role:"menu",className:cn("flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft",anchorPosition==="right"?"right-0":"left-0",contentClassNames)},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000"},React.createElement("p",{className:"mb-1"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-4"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
1
+ import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"./Icon";import cn from"./utils/cn";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{if(ref.current?.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>document.removeEventListener("click",clickHandler)},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,triggerClassNames="",description})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger","aria-label":description,onClick:()=>setOpen(!isOpen),className:cn("flex items-center ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 focus:outline-none",triggerClassNames)},children,React.createElement(Icon,{name:isOpen?"icon-gui-chevron-up-mini":"icon-gui-chevron-down-mini",size:"1.25rem",additionalCSS:"text-neutral-1300 dark:text-neutral-000"}))};const Content=({children,anchorPosition="right",contentClassNames})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}return React.createElement("div",{id:"menu-content",role:"menu",className:cn("flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft",anchorPosition==="right"?"right-0":"left-0",contentClassNames)},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000"},React.createElement("p",{className:"mb-1"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",additionalCSS:"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-4"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;
2
2
  //# sourceMappingURL=DropdownMenu.js.map
package/core/DropdownMenu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/DropdownMenu.tsx"],"sourcesContent":["import React, {\n createContext,\n useContext,\n useState,\n useEffect,\n useRef,\n ReactNode,\n Dispatch,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\nconst DropdownMenuContext = createContext<{\n isOpen: boolean;\n setOpen: Dispatch<React.SetStateAction<boolean>>;\n}>({\n isOpen: false,\n setOpen: () => {},\n});\n\ntype DropdownMenuProps = {\n /**\n * The content to be displayed within the dropdown menu.\n */\n children: ReactNode;\n};\n\ntype TriggerProps = {\n /**\n * The content to be displayed within the trigger element.\n */\n children: ReactNode;\n /**\n * Additional class names to apply to the trigger element.\n */\n triggerClassNames?: string;\n /**\n * A description for the trigger element, used for accessibility purposes.\n */\n description?: string;\n};\n\ntype ContentProps = {\n /**\n * The content to be displayed within the dropdown menu.\n */\n children: ReactNode;\n /**\n * The position of the dropdown menu relative to the trigger element.\n * Defaults to \"right\".\n */\n anchorPosition?: string;\n /**\n * Additional class names to apply to the content container.\n */\n contentClassNames?: string;\n};\n\ntype LinkProps = {\n url: string;\n title: string;\n subtitle?: string;\n iconName?: IconName;\n children?: ReactNode;\n};\n\nconst DropdownMenu = ({ children }: DropdownMenuProps) => {\n const [isOpen, setOpen] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const clickHandler = (e: MouseEvent) => {\n if (ref.current?.contains(e.target as Node)) return;\n setOpen(false);\n };\n document.addEventListener(\"click\", clickHandler);\n return () => document.removeEventListener(\"click\", clickHandler);\n }, []);\n\n return (\n <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>\n <div id=\"dropdown-menu\" className=\"relative\" ref={ref}>\n {children}\n </div>\n </DropdownMenuContext.Provider>\n );\n};\n\nconst Trigger = ({\n children,\n triggerClassNames = \"\",\n description,\n}: TriggerProps) => {\n const { isOpen, setOpen } = useContext(DropdownMenuContext);\n\n return (\n <button\n id=\"menu-trigger\"\n aria-label={description}\n role=\"button\"\n onClick={() => setOpen(!isOpen)}\n className={cn(\n \"flex items-center ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 focus:outline-none\",\n triggerClassNames,\n )}\n >\n {children}\n <Icon\n name={\n isOpen ? \"icon-gui-chevron-up-mini\" : \"icon-gui-chevron-down-mini\"\n }\n size=\"1.25rem\"\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </button>\n );\n};\n\nconst Content = ({\n children,\n anchorPosition = \"right\",\n contentClassNames,\n}: ContentProps) => {\n const { isOpen } = useContext(DropdownMenuContext);\n\n if (!isOpen) {\n return null;\n }\n\n return (\n <div\n id=\"menu-content\"\n role=\"menu\"\n className={cn(\n \"flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft\",\n anchorPosition === \"right\" ? \"right-0\" : \"left-0\",\n contentClassNames,\n )}\n >\n {children}\n </div>\n );\n};\n\nconst Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {\n return (\n <a\n href={url}\n className=\"menu-link group block p-2 rounded-lg\n hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000\"\n >\n <p className=\"mb-1\">\n {title}\n {iconName ? (\n <Icon\n name={iconName}\n size=\"1rem\"\n additionalCSS=\"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000\"\n />\n ) : null}\n </p>\n {subtitle ? <p className=\"ui-text-p3 mb-4\">{subtitle}</p> : null}\n {children}\n </a>\n );\n};\n\nDropdownMenu.Trigger = Trigger;\nDropdownMenu.Content = Content;\nDropdownMenu.Link = Link;\n\nexport default DropdownMenu;\n"],"names":["React","createContext","useContext","useState","useEffect","useRef","Icon","cn","DropdownMenuContext","isOpen","setOpen","DropdownMenu","children","ref","clickHandler","e","current","contains","target","document","addEventListener","removeEventListener","Provider","value","div","id","className","Trigger","triggerClassNames","description","button","aria-label","role","onClick","name","size","additionalCSS","Content","anchorPosition","contentClassNames","Link","url","title","subtitle","iconName","a","href","p"],"mappings":"AAAA,OAAOA,OACLC,aAAa,CACbC,UAAU,CACVC,QAAQ,CACRC,SAAS,CACTC,MAAM,KAGD,OAAQ,AACf,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAE5B,MAAMC,oBAAsBP,cAGzB,CACDQ,OAAQ,MACRC,QAAS,KAAO,CAClB,GAgDA,MAAMC,aAAe,CAAC,CAAEC,QAAQ,CAAqB,IACnD,KAAM,CAACH,OAAQC,QAAQ,CAAGP,SAAS,OACnC,MAAMU,IAAMR,OAAuB,MAEnCD,UAAU,KACR,MAAMU,aAAe,AAACC,IACpB,GAAIF,IAAIG,OAAO,EAAEC,SAASF,EAAEG,MAAM,EAAW,OAC7CR,QAAQ,MACV,EACAS,SAASC,gBAAgB,CAAC,QAASN,cACnC,MAAO,IAAMK,SAASE,mBAAmB,CAAC,QAASP,aACrD,EAAG,EAAE,EAEL,OACE,oBAACN,oBAAoBc,QAAQ,EAACC,MAAO,CAAEd,OAAQC,OAAQ,GACrD,oBAACc,OAAIC,GAAG,gBAAgBC,UAAU,WAAWb,IAAKA,KAC/CD,UAIT,EAEA,MAAMe,QAAU,CAAC,CACff,QAAQ,CACRgB,kBAAoB,EAAE,CACtBC,WAAW,CACE,IACb,KAAM,CAAEpB,MAAM,CAAEC,OAAO,CAAE,CAAGR,WAAWM,qBAEvC,OACE,oBAACsB,UACCL,GAAG,eACHM,aAAYF,YACZG,KAAK,SACLC,QAAS,IAAMvB,QAAQ,CAACD,QACxBiB,UAAWnB,GACT,wGACAqB,oBAGDhB,SACD,oBAACN,MACC4B,KACEzB,OAAS,2BAA6B,6BAExC0B,KAAK,UACLC,cAAc,4CAItB,EAEA,MAAMC,QAAU,CAAC,CACfzB,QAAQ,CACR0B,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,KAAM,CAAE9B,MAAM,CAAE,CAAGP,WAAWM,qBAE9B,GAAI,CAACC,OAAQ,CACX,OAAO,IACT,CAEA,OACE,oBAACe,OACCC,GAAG,eACHO,KAAK,OACLN,UAAWnB,GACT,iJACA+B,iBAAmB,QAAU,UAAY,SACzCC,oBAGD3B,SAGP,EAEA,MAAM4B,KAAO,CAAC,CAAEC,GAAG,CAAEC,KAAK,CAAEC,QAAQ,CAAEC,QAAQ,CAAEhC,QAAQ,CAAa,IACnE,OACE,oBAACiC,KACCC,KAAML,IACNf,UAAU,sOAGV,oBAACqB,KAAErB,UAAU,QACVgB,MACAE,SACC,oBAACtC,MACC4B,KAAMU,SACNT,KAAK,OACLC,cAAc,uFAEd,MAELO,SAAW,oBAACI,KAAErB,UAAU,mBAAmBiB,UAAgB,KAC3D/B,SAGP,CAEAD,CAAAA,aAAagB,OAAO,CAAGA,OACvBhB,CAAAA,aAAa0B,OAAO,CAAGA,OACvB1B,CAAAA,aAAa6B,IAAI,CAAGA,IAEpB,gBAAe7B,YAAa"}
1
+ {"version":3,"sources":["../../src/core/DropdownMenu.tsx"],"sourcesContent":["import React, {\n createContext,\n useContext,\n useState,\n useEffect,\n useRef,\n ReactNode,\n Dispatch,\n} from \"react\";\nimport Icon from \"./Icon\";\nimport { IconName } from \"./Icon/types\";\nimport cn from \"./utils/cn\";\n\nconst DropdownMenuContext = createContext<{\n isOpen: boolean;\n setOpen: Dispatch<React.SetStateAction<boolean>>;\n}>({\n isOpen: false,\n setOpen: () => {},\n});\n\ntype DropdownMenuProps = {\n /**\n * The content to be displayed within the dropdown menu.\n */\n children: ReactNode;\n};\n\ntype TriggerProps = {\n /**\n * The content to be displayed within the trigger element.\n */\n children: ReactNode;\n /**\n * Additional class names to apply to the trigger element.\n */\n triggerClassNames?: string;\n /**\n * A description for the trigger element, used for accessibility purposes.\n */\n description?: string;\n};\n\ntype ContentProps = {\n /**\n * The content to be displayed within the dropdown menu.\n */\n children: ReactNode;\n /**\n * The position of the dropdown menu relative to the trigger element.\n * Defaults to \"right\".\n */\n anchorPosition?: string;\n /**\n * Additional class names to apply to the content container.\n */\n contentClassNames?: string;\n};\n\ntype LinkProps = {\n url: string;\n title: string;\n subtitle?: string;\n iconName?: IconName;\n children?: ReactNode;\n};\n\nconst DropdownMenu = ({ children }: DropdownMenuProps) => {\n const [isOpen, setOpen] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const clickHandler = (e: MouseEvent) => {\n if (ref.current?.contains(e.target as Node)) return;\n setOpen(false);\n };\n document.addEventListener(\"click\", clickHandler);\n return () => document.removeEventListener(\"click\", clickHandler);\n }, []);\n\n return (\n <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>\n <div id=\"dropdown-menu\" className=\"relative\" ref={ref}>\n {children}\n </div>\n </DropdownMenuContext.Provider>\n );\n};\n\nconst Trigger = ({\n children,\n triggerClassNames = \"\",\n description,\n}: TriggerProps) => {\n const { isOpen, setOpen } = useContext(DropdownMenuContext);\n\n return (\n <button\n id=\"menu-trigger\"\n aria-label={description}\n onClick={() => setOpen(!isOpen)}\n className={cn(\n \"flex items-center ui-text-label3 font-bold text-neutral-1000 dark:text-neutral-300 focus:outline-none\",\n triggerClassNames,\n )}\n >\n {children}\n <Icon\n name={\n isOpen ? \"icon-gui-chevron-up-mini\" : \"icon-gui-chevron-down-mini\"\n }\n size=\"1.25rem\"\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </button>\n );\n};\n\nconst Content = ({\n children,\n anchorPosition = \"right\",\n contentClassNames,\n}: ContentProps) => {\n const { isOpen } = useContext(DropdownMenuContext);\n\n if (!isOpen) {\n return null;\n }\n\n return (\n <div\n id=\"menu-content\"\n role=\"menu\"\n className={cn(\n \"flex flex-col absolute z-10 border border-neutral-400 dark:border-neutral-900 bg-neutral-000 dark:bg-neutral-1300 rounded-lg ui-shadow-md-soft\",\n anchorPosition === \"right\" ? \"right-0\" : \"left-0\",\n contentClassNames,\n )}\n >\n {children}\n </div>\n );\n};\n\nconst Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {\n return (\n <a\n href={url}\n className=\"menu-link group block p-2 rounded-lg\n hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000\"\n >\n <p className=\"mb-1\">\n {title}\n {iconName ? (\n <Icon\n name={iconName}\n size=\"1rem\"\n additionalCSS=\"align-middle ml-2 relative -top-px -left-1 text-neutral-1300 dark:text-neutral-000\"\n />\n ) : null}\n </p>\n {subtitle ? <p className=\"ui-text-p3 mb-4\">{subtitle}</p> : null}\n {children}\n </a>\n );\n};\n\nDropdownMenu.Trigger = Trigger;\nDropdownMenu.Content = Content;\nDropdownMenu.Link = Link;\n\nexport default DropdownMenu;\n"],"names":["React","createContext","useContext","useState","useEffect","useRef","Icon","cn","DropdownMenuContext","isOpen","setOpen","DropdownMenu","children","ref","clickHandler","e","current","contains","target","document","addEventListener","removeEventListener","Provider","value","div","id","className","Trigger","triggerClassNames","description","button","aria-label","onClick","name","size","additionalCSS","Content","anchorPosition","contentClassNames","role","Link","url","title","subtitle","iconName","a","href","p"],"mappings":"AAAA,OAAOA,OACLC,aAAa,CACbC,UAAU,CACVC,QAAQ,CACRC,SAAS,CACTC,MAAM,KAGD,OAAQ,AACf,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAE5B,MAAMC,oBAAsBP,cAGzB,CACDQ,OAAQ,MACRC,QAAS,KAAO,CAClB,GAgDA,MAAMC,aAAe,CAAC,CAAEC,QAAQ,CAAqB,IACnD,KAAM,CAACH,OAAQC,QAAQ,CAAGP,SAAS,OACnC,MAAMU,IAAMR,OAAuB,MAEnCD,UAAU,KACR,MAAMU,aAAe,AAACC,IACpB,GAAIF,IAAIG,OAAO,EAAEC,SAASF,EAAEG,MAAM,EAAW,OAC7CR,QAAQ,MACV,EACAS,SAASC,gBAAgB,CAAC,QAASN,cACnC,MAAO,IAAMK,SAASE,mBAAmB,CAAC,QAASP,aACrD,EAAG,EAAE,EAEL,OACE,oBAACN,oBAAoBc,QAAQ,EAACC,MAAO,CAAEd,OAAQC,OAAQ,GACrD,oBAACc,OAAIC,GAAG,gBAAgBC,UAAU,WAAWb,IAAKA,KAC/CD,UAIT,EAEA,MAAMe,QAAU,CAAC,CACff,QAAQ,CACRgB,kBAAoB,EAAE,CACtBC,WAAW,CACE,IACb,KAAM,CAAEpB,MAAM,CAAEC,OAAO,CAAE,CAAGR,WAAWM,qBAEvC,OACE,oBAACsB,UACCL,GAAG,eACHM,aAAYF,YACZG,QAAS,IAAMtB,QAAQ,CAACD,QACxBiB,UAAWnB,GACT,wGACAqB,oBAGDhB,SACD,oBAACN,MACC2B,KACExB,OAAS,2BAA6B,6BAExCyB,KAAK,UACLC,cAAc,4CAItB,EAEA,MAAMC,QAAU,CAAC,CACfxB,QAAQ,CACRyB,eAAiB,OAAO,CACxBC,iBAAiB,CACJ,IACb,KAAM,CAAE7B,MAAM,CAAE,CAAGP,WAAWM,qBAE9B,GAAI,CAACC,OAAQ,CACX,OAAO,IACT,CAEA,OACE,oBAACe,OACCC,GAAG,eACHc,KAAK,OACLb,UAAWnB,GACT,iJACA8B,iBAAmB,QAAU,UAAY,SACzCC,oBAGD1B,SAGP,EAEA,MAAM4B,KAAO,CAAC,CAAEC,GAAG,CAAEC,KAAK,CAAEC,QAAQ,CAAEC,QAAQ,CAAEhC,QAAQ,CAAa,IACnE,OACE,oBAACiC,KACCC,KAAML,IACNf,UAAU,sOAGV,oBAACqB,KAAErB,UAAU,QACVgB,MACAE,SACC,oBAACtC,MACC2B,KAAMW,SACNV,KAAK,OACLC,cAAc,uFAEd,MAELQ,SAAW,oBAACI,KAAErB,UAAU,mBAAmBiB,UAAgB,KAC3D/B,SAGP,CAEAD,CAAAA,aAAagB,OAAO,CAAGA,OACvBhB,CAAAA,aAAayB,OAAO,CAAGA,OACvBzB,CAAAA,aAAa6B,IAAI,CAAGA,IAEpB,gBAAe7B,YAAa"}