@ably/ui 17.11.8 → 17.12.0-dev.3e94f3be

package/core/Accordion/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n  /**\n   * The name of the accordion item.\n   */\n  name: string;\n\n  /**\n   * The optional icon name to be displayed alongside the accordion item.\n   */\n  icon?: IconName | AccordionIcon;\n\n  /**\n   * The content to be displayed when the accordion item is expanded.\n   */\n  content: ReactNode;\n\n  /**\n   * Optional click handler function that is called when the accordion item is clicked.\n   * @param index - The index of the clicked accordion item.\n   */\n  onClick?: (index: number) => void;\n\n  /**\n   * Indicates whether the accordion item is interactive.\n   * When false, the item cannot be expanded or collapsed by user interaction.\n   * @default true\n   */\n  interactive?: boolean;\n};\n\nexport type AccordionIcon = {\n  name: IconName;\n  css?: string;\n};\n\nexport type AccordionIcons = {\n  closed: AccordionIcon;\n  open: AccordionIcon;\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n  /**\n   * Background color class for the accordion.\n   */\n  bg: ColorThemeSet;\n\n  /**\n   * Background color when the accordion item is hovered.\n   */\n  hoverBg: ColorThemeSet;\n\n  /**\n   * Text color class for the accordion.\n   */\n  text: ColorThemeSet;\n\n  /**\n   * Color class for the toggle icon of the accordion.\n   */\n  toggleIconColor: ColorThemeSet;\n\n  /**\n   * Optional background color class for selectable accordion items.\n   */\n  selectableBg?: ColorThemeSet;\n\n  /**\n   * Optional text color class for selectable accordion items.\n   */\n  selectableText?: ColorThemeSet;\n\n  /**\n   * Optional border color for the accordion.\n   */\n  border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n  /**\n   * If true, only one accordion item can be open at a time.\n   * @default false\n   */\n  autoClose?: boolean;\n\n  /**\n   * If true, accordion items can be selected.\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * If true, the accordion header will stick to the top when scrolling.\n   * @default false\n   */\n  sticky?: boolean;\n\n  /**\n   * An array of indexes indicating which accordion items should be open by default.\n   * @default []\n   */\n  defaultOpenIndexes?: number[];\n\n  /**\n   * If true, all accordion items will be fully open.\n   * @default false\n   */\n  fullyOpen?: boolean;\n\n  /**\n   * Custom CSS class to apply to the accordion header.\n   * @default \"\"\n   */\n  headerCSS?: string;\n\n  /**\n   * If true, borders between accordion items will be hidden.\n   * @default false\n   */\n  hideBorders?: boolean;\n\n  /**\n   * Size of the row icon.\n   * @default \"32px\"\n   */\n  rowIconSize?: IconSize;\n\n  /**\n   * Size of the accordion icon.\n   * @default \"16px\"\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Custom CSS classes to apply to the selected accordion header.\n   * @default \"\"\n   */\n  selectedHeaderCSS?: string;\n\n  /**\n   * Custom CSS classes to apply to the accordion content.\n   * @default \"\"\n   */\n  contentCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"AA+CA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}
+{"version":3,"sources":["../../../src/core/Accordion/types.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { IconName, IconSize } from \"../Icon/types\";\nimport { ColorThemeSet } from \"../styles/colors/types\";\n\n/**\n * Represents the data structure for an Accordion component.\n */\nexport type AccordionData = {\n  /**\n   * The name of the accordion item.\n   * @deprecated Use `heading` for custom heading content. This will be used as fallback if `heading` is not provided.\n   */\n  name: string;\n\n  /**\n   * Custom heading content. If provided, this will be used instead of `name`.\n   * Can be a ReactNode or a function that receives the index and isOpen state and returns ReactNode.\n   */\n  heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);\n\n  /**\n   * The optional icon name to be displayed alongside the accordion item.\n   */\n  icon?: IconName | AccordionIcon;\n\n  /**\n   * The content to be displayed when the accordion item is expanded.\n   */\n  content: ReactNode;\n\n  /**\n   * Optional click handler function that is called when the accordion item is clicked.\n   * @param index - The index of the clicked accordion item.\n   */\n  onClick?: (index: number) => void;\n\n  /**\n   * Indicates whether the accordion item is interactive.\n   * When false, the item cannot be expanded or collapsed by user interaction.\n   * @default true\n   */\n  interactive?: boolean;\n};\n\nexport type AccordionIcon = {\n  name: IconName;\n  css?: string;\n};\n\nexport type AccordionIcons = {\n  closed: AccordionIcon;\n  open: AccordionIcon;\n};\n\nexport const accordionThemes = [\"default\", \"transparent\", \"static\"] as const;\n\nexport type AccordionTheme = (typeof accordionThemes)[number];\n\n/**\n * Represents the theme colors for an accordion component.\n */\nexport type AccordionThemeColors = {\n  /**\n   * Background color class for the accordion.\n   */\n  bg: ColorThemeSet;\n\n  /**\n   * Background color when the accordion item is hovered.\n   */\n  hoverBg: ColorThemeSet;\n\n  /**\n   * Text color class for the accordion.\n   */\n  text: ColorThemeSet;\n\n  /**\n   * Color class for the toggle icon of the accordion.\n   */\n  toggleIconColor: ColorThemeSet;\n\n  /**\n   * Optional background color class for selectable accordion items.\n   */\n  selectableBg?: ColorThemeSet;\n\n  /**\n   * Optional text color class for selectable accordion items.\n   */\n  selectableText?: ColorThemeSet;\n\n  /**\n   * Optional border color for the accordion.\n   */\n  border?: string;\n};\n\n/**\n * Options for configuring the Accordion component.\n */\nexport type AccordionOptions = {\n  /**\n   * If true, only one accordion item can be open at a time.\n   * @default false\n   */\n  autoClose?: boolean;\n\n  /**\n   * If true, accordion items can be selected.\n   * @default false\n   */\n  selectable?: boolean;\n\n  /**\n   * If true, the accordion header will stick to the top when scrolling.\n   * @default false\n   */\n  sticky?: boolean;\n\n  /**\n   * An array of indexes indicating which accordion items should be open by default.\n   * @default []\n   */\n  defaultOpenIndexes?: number[];\n\n  /**\n   * If true, all accordion items will be fully open.\n   * @default false\n   */\n  fullyOpen?: boolean;\n\n  /**\n   * Custom CSS class to apply to the accordion header.\n   * @default \"\"\n   */\n  headerCSS?: string;\n\n  /**\n   * If true, borders between accordion items will be hidden.\n   * @default false\n   */\n  hideBorders?: boolean;\n\n  /**\n   * Size of the row icon.\n   * @default \"32px\"\n   */\n  rowIconSize?: IconSize;\n\n  /**\n   * Size of the accordion icon.\n   * @default \"16px\"\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Custom CSS classes to apply to the selected accordion header.\n   * @default \"\"\n   */\n  selectedHeaderCSS?: string;\n\n  /**\n   * Custom CSS classes to apply to the accordion content.\n   * @default \"\"\n   */\n  contentCSS?: string;\n\n  /**\n   * Custom CSS classes to apply to the accordion item wrapper when it is open/active.\n   * @default \"\"\n   */\n  selectedItemCSS?: string;\n};\n"],"names":["accordionThemes"],"mappings":"AAsDA,OAAO,MAAMA,gBAAkB,CAAC,UAAW,cAAe,SAAS,AAAU"}

package/core/Accordion.js

@@ -1,2 +1,2 @@
-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;
+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,heading,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;const renderHeading=()=>{if(heading){if(typeof heading==="function"){return heading(index,isOpen)}return heading}return React.createElement("span",null,name)};return React.createElement(AccordionItem,{value:rowKey,className:cn({[`${border}`]:border&&!options?.hideBorders,[options?.selectedItemCSS??""]:options?.selectedItemCSS&&isOpen})},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,renderHeading(),!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,additionalCSS:isOpen?typeof toggleIcons.open==="object"&&toggleIcons.open.css||"":typeof toggleIcons.closed==="object"&&toggleIcons.closed.css||"",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,heading:item.heading,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;
 //# sourceMappingURL=Accordion.js.map

package/core/Accordion.js.map

@@ -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    }, [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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"}
+{"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  heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);\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  heading,\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  // Render custom heading or fallback to name\n  const renderHeading = () => {\n    if (heading) {\n      if (typeof heading === \"function\") {\n        return heading(index, isOpen);\n      }\n      return heading;\n    }\n    return <span>{name}</span>;\n  };\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n        [options?.selectedItemCSS ?? \"\"]: options?.selectedItemCSS && isOpen,\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        {renderHeading()}\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              additionalCSS={\n                isOpen\n                  ? (typeof toggleIcons.open === \"object\" &&\n                      toggleIcons.open.css) ||\n                    \"\"\n                  : (typeof toggleIcons.closed === \"object\" &&\n                      toggleIcons.closed.css) ||\n                    \"\"\n              }\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        heading={item.heading}\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","heading","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","renderHeading","span","value","className","hideBorders","selectedItemCSS","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","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/Icon/components/icon-gui-square-3-stack-3d.js

@@ -0,0 +1,2 @@
+import*as React from"react";import{forwardRef}from"react";const IconGuiSquare3Stack3d=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{stroke:"#03020D",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"}));const ForwardRef=forwardRef(IconGuiSquare3Stack3d);export default ForwardRef;
+//# sourceMappingURL=icon-gui-square-3-stack-3d.js.map

package/core/Icon/components/icon-gui-square-3-stack-3d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-square-3-stack-3d.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nconst IconGuiSquare3Stack3d = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"currentColor\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke=\"#03020D\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiSquare3Stack3d);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiSquare3Stack3d","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,sBAAwB,CAAC,CAC7BC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,eAAeC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKC,OAAO,UAAUC,cAAc,QAAQC,eAAe,QAAQC,YAAa,IAAKC,EAAE,yMACtW,MAAMC,WAAapB,WAAWC,sBAC9B,gBAAemB,UAAW"}

package/index.d.ts

@@ -10,8 +10,14 @@ import { ColorThemeSet } from ".@ably/ui/core/styles/colors/types";
 export type AccordionData = {
     /**
      * The name of the accordion item.
+     * @deprecated Use `heading` for custom heading content. This will be used as fallback if `heading` is not provided.
      */
     name: string;
+    /**
+     * Custom heading content. If provided, this will be used instead of `name`.
+     * Can be a ReactNode or a function that receives the index and isOpen state and returns ReactNode.
+     */
+    heading?: ReactNode | ((index: number, isOpen: boolean) => ReactNode);
     /**
      * The optional icon name to be displayed alongside the accordion item.
      */
@@ -134,6 +140,11 @@ export type AccordionOptions = {
      * @default ""
      */
     contentCSS?: string;
+    /**
+     * Custom CSS classes to apply to the accordion item wrapper when it is open/active.
+     * @default ""
+     */
+    selectedItemCSS?: string;
 };
 //# sourceMappingURL=types.d.ts.map
 }
@@ -2479,6 +2490,17 @@ export default ForwardRef;
 //# sourceMappingURL=icon-gui-spinner-light.d.ts.map
 }
 
+declare module '@ably/ui/core/Icon/components/icon-gui-square-3-stack-3d' {
+import * as React from "react";
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;
+//# sourceMappingURL=icon-gui-square-3-stack-3d.d.ts.map
+}
+
 declare module '@ably/ui/core/Icon/components/icon-product-ai-transport-mono' {
 import * as React from "react";
 interface SVGRProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.11.8",
+  "version": "17.12.0-dev.3e94f3be",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",