@atlaskit/editor-toolbar 0.2.2 → 0.3.0

package/dist/esm/ui/ColorPalette/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/ColorPalette/utils.js

@@ -0,0 +1,84 @@
+/**
+ * Default number of columns in the color picker
+ */
+export var DEFAULT_COLOR_PICKER_COLUMNS = 7;
+
+/**
+ * Splits a palette array into rows based on the specified number of columns
+ * @param palette - Array of palette colors
+ * @param cols - Number of columns per row
+ * @returns Array of color rows
+ */
+export function getColorsPerRowFromPalette(palette) {
+  var cols = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COLOR_PICKER_COLUMNS;
+  return palette.reduce(function (resultArray, item, index) {
+    var chunkIndex = Math.floor(index / cols);
+    resultArray[chunkIndex] = resultArray[chunkIndex] || []; // start a new chunk
+    resultArray[chunkIndex].push(item);
+    return resultArray;
+  }, []);
+}
+
+/**
+ * Finds the row and column indices of a selected color in the palette grid
+ * @param colorsPerRow - 2D array of colors organized by rows
+ * @param selectedColor - The currently selected color value
+ * @returns Object containing row and column indices
+ */
+export function getSelectedRowAndColumn(colorsPerRow, selectedColor) {
+  var selectedRowIndex = -1;
+  var selectedColumnIndex = -1;
+  colorsPerRow.forEach(function (row, rowIndex) {
+    row.forEach(function (_ref, columnIndex) {
+      var value = _ref.value;
+      if (value === selectedColor) {
+        selectedRowIndex = rowIndex;
+        selectedColumnIndex = columnIndex;
+      }
+    });
+  });
+  return {
+    selectedRowIndex: selectedRowIndex,
+    selectedColumnIndex: selectedColumnIndex
+  };
+}
+
+/**
+ * Finds the row and column indices of a selected color in a flat palette array
+ * @param palette - Flat array of palette colors
+ * @param selectedColor - The currently selected color value
+ * @param cols - Number of columns per row
+ * @returns Object containing row and column indices
+ */
+export function getSelectedRowAndColumnFromPalette(palette, selectedColor) {
+  var cols = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_COLOR_PICKER_COLUMNS;
+  var colorsPerRow = getColorsPerRowFromPalette(palette, cols);
+  return getSelectedRowAndColumn(colorsPerRow, selectedColor);
+}
+
+/**
+ * Extracts the actual color value from a CSS variable expression
+ * Handles both token variables and fallback values
+ * @param variableExpression - CSS variable expression (e.g., "var(--ds-background-accent-blue-subtle, #0052CC)")
+ * @returns The resolved color value or empty string if not found
+ */
+export var getTokenCSSVariableValue = function getTokenCSSVariableValue(variableExpression) {
+  // Match CSS variable pattern: var(--variable-name, fallback)
+  // Ignored via go/ees005
+  // eslint-disable-next-line require-unicode-regexp
+  var matcher = variableExpression.match(/var\(([^,\)]+)(,.*)?/);
+  if (matcher) {
+    var variable = matcher[1].trim();
+    var fallback = matcher[2] ? matcher[2].replace(',', '').trim() : '';
+
+    // Return fallback if we're in a server environment
+    if (typeof document === 'undefined') {
+      return fallback;
+    }
+
+    // Get the computed value from the document
+    var value = window.getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+    return value || fallback;
+  }
+  return '';
+};

package/dist/esm/ui/ToolbarDropdownMenu.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { useToolbarUI } from '../hooks/ui-context';
 import { ToolbarButton } from './ToolbarButton';
-export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
+import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
+var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
   var iconBefore = _ref.iconBefore,
     groupLocation = _ref.groupLocation,
     children = _ref.children,
@@ -11,6 +12,23 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
     label = _ref.label;
   var _useToolbarUI = useToolbarUI(),
     onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
+  var _useToolbarDropdownMe = useToolbarDropdownMenu(),
+    closeMenu = _useToolbarDropdownMe.closeMenu,
+    isOpen = _useToolbarDropdownMe.isOpen,
+    openMenu = _useToolbarDropdownMe.openMenu;
+  var handleOpenChange = useCallback(function (args) {
+    onDropdownOpenChanged(args);
+    if (!args.isOpen) {
+      closeMenu();
+    }
+  }, [closeMenu, onDropdownOpenChanged]);
+  var handleClick = useCallback(function () {
+    if (!isOpen) {
+      openMenu();
+    } else {
+      closeMenu();
+    }
+  }, [closeMenu, openMenu, isOpen]);
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -20,7 +38,10 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
         "aria-haspopup": triggerProps['aria-haspopup'],
         "aria-controls": triggerProps['aria-controls'],
         onBlur: triggerProps.onBlur,
-        onClick: triggerProps.onClick,
+        onClick: function onClick(e) {
+          handleClick();
+          triggerProps.onClick && triggerProps.onClick(e);
+        },
         onFocus: triggerProps.onFocus,
         testId: testId,
         iconBefore: iconBefore,
@@ -29,6 +50,22 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref) {
         label: label
       });
     },
-    onOpenChange: onDropdownOpenChanged
+    onOpenChange: handleOpenChange,
+    isOpen: isOpen
   }, children);
+};
+export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
+  var iconBefore = _ref2.iconBefore,
+    groupLocation = _ref2.groupLocation,
+    children = _ref2.children,
+    isDisabled = _ref2.isDisabled,
+    testId = _ref2.testId,
+    label = _ref2.label;
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
+    iconBefore: iconBefore,
+    groupLocation: groupLocation,
+    isDisabled: isDisabled,
+    testId: testId,
+    label: label
+  }, children));
 };

package/dist/esm/ui/ToolbarDropdownMenuContext.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useContext, useState } from 'react';
+var ToolbarDropdownMenuContext = /*#__PURE__*/createContext(undefined);
+export var useToolbarDropdownMenu = function useToolbarDropdownMenu() {
+  var context = useContext(ToolbarDropdownMenuContext);
+  if (!context) {
+    throw new Error('useToolbarDropdownMenu must be used within ToolbarDropdownMenuProvider');
+  }
+  return context;
+};
+export var ToolbarDropdownMenuProvider = function ToolbarDropdownMenuProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var openMenu = function openMenu() {
+    return setIsOpen(true);
+  };
+  var closeMenu = function closeMenu() {
+    setIsOpen(false);
+  };
+  var contextValue = {
+    openMenu: openMenu,
+    closeMenu: closeMenu,
+    isOpen: isOpen
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContext.Provider, {
+    value: contextValue
+  }, children);
+};

package/dist/esm/ui/icons/AIChatIcon.js

@@ -1,20 +1,31 @@
 /* AIChatIcon.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./AIChatIcon.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
-import { RovoIcon as RovoLogoIcon } from '@atlaskit/logo';
-import { Box } from '@atlaskit/primitives/compiled';
 var styles = {
-  small: "_1e0c1txw _4cvr1h6o _1bah1h6o _4t3i1crf _1bsb1crf"
+  container: "_1e0c1txw _4cvr1h6o _1bah1h6o _4t3i1crf _1bsb1crf"
 };
-export var AIChatIcon = function AIChatIcon(_ref) {
+var ROVO_SVG_PATH = "<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path d=\"M5.4905 0.135176C5.80591 -0.0450587 6.19311 -0.0450584 6.50852 0.135176L10.8688 2.62676C11.1885 2.80943 11.3857 3.14937 11.3857 3.51754V8.48246C11.3857 8.85063 11.1885 9.19057 10.8688 9.37324L6.50852 11.8648C6.19311 12.0451 5.80591 12.0451 5.4905 11.8648L1.13022 9.37324C0.810557 9.19057 0.613281 8.85063 0.613281 8.48246V3.51754C0.613281 3.14937 0.810557 2.80943 1.13022 2.62676L5.4905 0.135176Z\" fill=\"#BF63F3\"/>\n\t\t<mask id=\"mask0_7293_80230\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"12\" height=\"12\">\n\t\t\t<path d=\"M5.49147 0.135176C5.80688 -0.0450587 6.19409 -0.0450584 6.5095 0.135176L10.8698 2.62676C11.1894 2.80943 11.3867 3.14937 11.3867 3.51754V8.48246C11.3867 8.85063 11.1894 9.19057 10.8698 9.37324L6.5095 11.8648C6.19409 12.0451 5.80688 12.0451 5.49147 11.8648L1.13119 9.37324C0.811533 9.19057 0.614258 8.85063 0.614258 8.48246V3.51754C0.614258 3.14937 0.811533 2.80943 1.13119 2.62676L5.49147 0.135176Z\" fill=\"#BF63F3\"/>\n\t\t</mask>\n\t\t<g mask=\"url(#mask0_7293_80230)\">\n\t\t\t<path d=\"M1.16288 17.7949C1.88804 16.4071 2.9469 15.3192 4.34131 14.5785C5.73572 13.8378 7.35499 13.5206 8.99441 13.7092L0.174767 -2.55519C-1.28774 -2.29055 -2.70974 -1.80225 -4.07832 -1.07526C-5.44691 -0.348264 -6.62375 0.522036 -7.64571 1.5465L1.16656 17.7973L1.16288 17.7949Z\" fill=\"#82B536\"/>\n\t\t\t<path d=\"M6.2482 7.95377C3.81481 8.96062 1.95638 10.6236 1.88069 12.9253C1.88069 12.9253 1.88199 12.9371 1.88076 12.9428C1.87578 13.1139 1.87896 13.2868 1.89469 13.4633C1.89533 13.4648 1.89596 13.4663 1.89659 13.4678C1.91139 13.6465 1.93718 13.8294 1.97333 14.0151C1.98259 14.0588 1.99625 14.1041 2.00551 14.1478C2.03868 14.296 2.07186 14.4442 2.11979 14.5968C2.18327 14.7994 2.25711 15.0047 2.3457 15.2144C2.50959 15.6024 2.70185 15.9488 2.90932 16.2571C3.18552 16.6673 3.48842 17.0101 3.79015 17.2936C3.86597 17.3643 3.94053 17.432 4.01695 17.4954C4.37212 17.7357 4.89091 18.0543 5.7602 18.4584C6.328 18.7233 7.04924 19.025 7.97282 19.3662C8.7114 18.2422 10.0629 17.368 11.3277 16.3888C12.3263 15.6149 13.2681 14.7764 13.805 13.6971C14.2974 12.7085 14.3102 11.4765 13.7704 10.1986C12.4194 7.00012 9.42898 6.63591 6.2507 7.95097L6.2482 7.95377Z\" fill=\"#FCA700\"/>\n\t\t\t<path d=\"M11.6634 -7.61136L-2.81461 -5.02797C-2.81461 -5.02797 -1.3238 1.52224 -4.55981 7.48526C-4.11672 7.5189 -3.66847 7.5392 -3.21522 7.53288C5.12023 7.41664 11.7808 0.635945 11.6634 -7.61401L11.6634 -7.61136Z\" fill=\"#1868DB\"/>\n\t\t</g>\n\t\t<path d=\"M5.67239 2.71364C5.90711 2.58408 6.19359 2.58646 6.42641 2.72078L8.69144 4.02848C8.92849 4.16524 9.07522 4.41898 9.07522 4.69232V7.30776C9.07522 7.58218 8.92938 7.83479 8.69162 7.97148L6.98899 8.95449C6.99272 8.94401 6.99627 8.93347 6.99965 8.92286C7.03126 8.82487 7.04801 8.72132 7.04801 8.61548V6.00004C7.04801 5.64073 6.8569 5.3094 6.54519 5.13016L5.27598 4.39771V3.3846C5.27598 3.30477 5.28833 3.22678 5.31168 3.15296C5.3691 2.97429 5.49122 2.81962 5.65828 2.72306L5.65879 2.72277C5.66358 2.72001 5.66814 2.71694 5.67239 2.71364Z\" fill=\"white\"/>\n\t\t<path d=\"M5.09599 3.04811L3.39336 4.03112C3.1556 4.1678 3.00977 4.42042 3.00977 4.69484V7.31028C3.00977 7.58362 3.15646 7.83734 3.39352 7.9741L5.65857 9.28182C5.89139 9.41612 6.17789 9.41851 6.4126 9.28896C6.41685 9.28566 6.42137 9.28261 6.42616 9.27985C6.59341 9.18336 6.71572 9.02863 6.77323 8.84989C6.79663 8.77599 6.809 8.69792 6.809 8.618V7.60489L5.53987 6.87249C5.22822 6.69323 5.03697 6.36183 5.03697 6.00256V3.38712C5.03697 3.28142 5.05368 3.17802 5.0852 3.08015C5.08862 3.0694 5.09222 3.05872 5.09599 3.04811Z\" fill=\"white\"/>\n\t</svg>";
+var RovoLogoSVG = function RovoLogoSVG(_ref) {
   var label = _ref.label,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.small
-  }, /*#__PURE__*/React.createElement(RovoLogoIcon, {
+  return /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": label,
+    "data-testid": testId
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: ROVO_SVG_PATH
+    },
+    className: ax([styles.container])
+  });
+};
+export var AIChatIcon = function AIChatIcon(_ref2) {
+  var label = _ref2.label,
+    testId = _ref2.testId;
+  return /*#__PURE__*/React.createElement(RovoLogoSVG, {
     label: label,
-    testId: testId,
-    size: "xxsmall"
-  }));
+    testId: testId
+  });
 };

package/dist/types/index.d.ts

@@ -10,6 +10,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
+export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -55,5 +56,6 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
 export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
+export { default as ColorPalette } from './ui/ColorPalette';
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/types/ui/ColorPalette/Color.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { ColorProps } from './types';
+/**
+ * Individual color palette item component
+ * Displays a single color swatch with tooltip and selection state
+ */
+export declare const Color: React.NamedExoticComponent<ColorProps>;

package/dist/types/ui/ColorPalette/getColorMessage.d.ts

@@ -0,0 +1,8 @@
+import { type MessageDescriptor } from 'react-intl-next';
+/**
+ * Retrieves the appropriate internationalization message for a given color
+ * @param messages - Record of color values to message descriptors
+ * @param color - The color value to look up
+ * @returns The message descriptor or undefined if not found
+ */
+export default function getColorMessage(messages: Record<string | number, MessageDescriptor>, color: string): MessageDescriptor | undefined;

package/dist/types/ui/ColorPalette/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ColorPaletteProps } from './types';
+/**
+ * ColorPalette component for displaying a grid of selectable colors
+ *
+ * Features:
+ * - Responsive grid layout
+ * - Keyboard navigation support
+ * - Accessibility compliance (ARIA attributes)
+ * - Theme-aware tooltips
+ * - Design token integration
+ * - Customizable color mapping
+ */
+declare const ColorPalette: ({ cols, onClick, onKeyDown, selectedColor, paletteOptions, }: ColorPaletteProps) => React.JSX.Element;
+export default ColorPalette;

package/dist/types/ui/ColorPalette/types.d.ts

@@ -0,0 +1,89 @@
+import { type ReactElement } from 'react';
+import { type MessageDescriptor } from 'react-intl-next';
+/**
+ * Represents a single color in the palette
+ */
+export interface PaletteColor {
+    /** The color value (hex, token, etc.) */
+    value: string;
+    /** Display label for the color */
+    label: string;
+    /** Border color for the color swatch */
+    border: string;
+    /** Optional internationalization message */
+    message?: MessageDescriptor;
+    /** Optional decorator element to display instead of checkmark */
+    decorator?: ReactElement;
+}
+/**
+ * Array of palette colors
+ */
+export type Palette = Array<PaletteColor>;
+/**
+ * Tooltip messages for different themes
+ */
+export type PaletteTooltipMessages = {
+    dark: Record<string, MessageDescriptor>;
+    light: Record<string, MessageDescriptor>;
+};
+/**
+ * Configuration options for the color palette
+ */
+export interface PaletteOptions {
+    /** Array of colors to display */
+    palette: PaletteColor[];
+    /**
+     * Function to convert hex codes to design system tokens
+     * Different color palettes may use different mapping functions
+     */
+    hexToPaletteColor?: (hexColor: string) => string | undefined;
+    /**
+     * Tooltip messages for different color themes
+     * Consumer determines which tooltip messages to use
+     */
+    paletteColorTooltipMessages?: PaletteTooltipMessages;
+}
+/**
+ * Props for the main ColorPalette component
+ */
+export interface ColorPaletteProps {
+    /** Currently selected color value */
+    selectedColor: string | null;
+    /** Callback when a color is clicked */
+    onClick: (value: string, label: string) => void;
+    /** Optional callback for keyboard navigation */
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+    /** Number of columns in the palette grid */
+    cols?: number;
+    /** Optional CSS class name */
+    className?: string;
+    /** Palette configuration options */
+    paletteOptions: PaletteOptions;
+}
+/**
+ * Props for individual color palette items
+ */
+export interface ColorProps {
+    /** The color value */
+    value: string;
+    /** Display label for accessibility */
+    label: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+    /** Whether this color is currently selected */
+    isSelected?: boolean;
+    /** Click handler */
+    onClick: (value: string, label: string) => void;
+    /** Keyboard event handler */
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+    /** Border color for the swatch */
+    borderColor: string;
+    /** Color for the checkmark icon */
+    checkMarkColor?: string;
+    /** Whether to auto-focus this item */
+    autoFocus?: boolean;
+    /** Function to convert hex to palette color */
+    hexToPaletteColor?: (hexColor: string) => string | undefined;
+    /** Optional decorator element */
+    decorator?: ReactElement;
+}

package/dist/types/ui/ColorPalette/utils.d.ts

@@ -0,0 +1,40 @@
+import type { PaletteColor } from './types';
+/**
+ * Default number of columns in the color picker
+ */
+export declare const DEFAULT_COLOR_PICKER_COLUMNS = 7;
+/**
+ * Splits a palette array into rows based on the specified number of columns
+ * @param palette - Array of palette colors
+ * @param cols - Number of columns per row
+ * @returns Array of color rows
+ */
+export declare function getColorsPerRowFromPalette(palette: PaletteColor[], cols?: number): PaletteColor[][];
+/**
+ * Finds the row and column indices of a selected color in the palette grid
+ * @param colorsPerRow - 2D array of colors organized by rows
+ * @param selectedColor - The currently selected color value
+ * @returns Object containing row and column indices
+ */
+export declare function getSelectedRowAndColumn(colorsPerRow: PaletteColor[][], selectedColor: string | null): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * Finds the row and column indices of a selected color in a flat palette array
+ * @param palette - Flat array of palette colors
+ * @param selectedColor - The currently selected color value
+ * @param cols - Number of columns per row
+ * @returns Object containing row and column indices
+ */
+export declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor[], selectedColor: string | null, cols?: number): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * Extracts the actual color value from a CSS variable expression
+ * Handles both token variables and fallback values
+ * @param variableExpression - CSS variable expression (e.g., "var(--ds-background-accent-blue-subtle, #0052CC)")
+ * @returns The resolved color value or empty string if not found
+ */
+export declare const getTokenCSSVariableValue: (variableExpression: string) => string;

package/dist/types/ui/ToolbarDropdownMenu.d.ts

@@ -1,4 +1,5 @@
 import React, { type ReactNode } from 'react';
+import { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
 import { type ToolbarButtonGroupLocation } from '../types';
 type ToolbarDropdownMenuProps = {
     iconBefore: React.ReactNode;
@@ -7,6 +8,8 @@ type ToolbarDropdownMenuProps = {
     isDisabled?: boolean;
     testId?: string;
     label?: string;
+    isOpen?: boolean;
+    onOpenChange?: (args: OnOpenChangeArgs) => void;
 };
 export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
 export {};

package/dist/types/ui/ToolbarDropdownMenuContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ToolbarDropdownMenuContextValue {
+    openMenu: () => void;
+    closeMenu: () => void;
+    isOpen: boolean;
+}
+export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextValue;
+interface ToolbarDropdownMenuProviderProps {
+    children: React.ReactNode;
+}
+export declare const ToolbarDropdownMenuProvider: ({ children, }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
+export {};

package/dist/types/ui/icons/AIChatIcon.d.ts

@@ -1,7 +1,10 @@
-import React from 'react';
-type AIChatIconProps = {
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+interface AIChatIconProps {
     label: string;
     testId?: string;
-};
-export declare const AIChatIcon: ({ label, testId }: AIChatIconProps) => React.JSX.Element;
+}
+export declare const AIChatIcon: ({ label, testId }: AIChatIconProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/index.d.ts

@@ -10,6 +10,7 @@ export { ToolbarSection } from './ui/ToolbarSection';
 export { ToolbarTooltip } from './ui/ToolbarTooltip';
 export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
 export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
+export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
 export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
 export { AIChatIcon } from './ui/icons/AIChatIcon';
 export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
@@ -55,5 +56,6 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
 export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
 export { IndentIcon } from './ui/icons/IndentIcon';
 export { OutdentIcon } from './ui/icons/OutdentIcon';
+export { default as ColorPalette } from './ui/ColorPalette';
 export type { IconComponent, ToolbarButtonGroupLocation } from './types';
 export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';

package/dist/types-ts4.5/ui/ColorPalette/Color.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { ColorProps } from './types';
+/**
+ * Individual color palette item component
+ * Displays a single color swatch with tooltip and selection state
+ */
+export declare const Color: React.NamedExoticComponent<ColorProps>;

package/dist/types-ts4.5/ui/ColorPalette/getColorMessage.d.ts

@@ -0,0 +1,8 @@
+import { type MessageDescriptor } from 'react-intl-next';
+/**
+ * Retrieves the appropriate internationalization message for a given color
+ * @param messages - Record of color values to message descriptors
+ * @param color - The color value to look up
+ * @returns The message descriptor or undefined if not found
+ */
+export default function getColorMessage(messages: Record<string | number, MessageDescriptor>, color: string): MessageDescriptor | undefined;

package/dist/types-ts4.5/ui/ColorPalette/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ColorPaletteProps } from './types';
+/**
+ * ColorPalette component for displaying a grid of selectable colors
+ *
+ * Features:
+ * - Responsive grid layout
+ * - Keyboard navigation support
+ * - Accessibility compliance (ARIA attributes)
+ * - Theme-aware tooltips
+ * - Design token integration
+ * - Customizable color mapping
+ */
+declare const ColorPalette: ({ cols, onClick, onKeyDown, selectedColor, paletteOptions, }: ColorPaletteProps) => React.JSX.Element;
+export default ColorPalette;

package/dist/types-ts4.5/ui/ColorPalette/types.d.ts

@@ -0,0 +1,89 @@
+import { type ReactElement } from 'react';
+import { type MessageDescriptor } from 'react-intl-next';
+/**
+ * Represents a single color in the palette
+ */
+export interface PaletteColor {
+    /** The color value (hex, token, etc.) */
+    value: string;
+    /** Display label for the color */
+    label: string;
+    /** Border color for the color swatch */
+    border: string;
+    /** Optional internationalization message */
+    message?: MessageDescriptor;
+    /** Optional decorator element to display instead of checkmark */
+    decorator?: ReactElement;
+}
+/**
+ * Array of palette colors
+ */
+export type Palette = Array<PaletteColor>;
+/**
+ * Tooltip messages for different themes
+ */
+export type PaletteTooltipMessages = {
+    dark: Record<string, MessageDescriptor>;
+    light: Record<string, MessageDescriptor>;
+};
+/**
+ * Configuration options for the color palette
+ */
+export interface PaletteOptions {
+    /** Array of colors to display */
+    palette: PaletteColor[];
+    /**
+     * Function to convert hex codes to design system tokens
+     * Different color palettes may use different mapping functions
+     */
+    hexToPaletteColor?: (hexColor: string) => string | undefined;
+    /**
+     * Tooltip messages for different color themes
+     * Consumer determines which tooltip messages to use
+     */
+    paletteColorTooltipMessages?: PaletteTooltipMessages;
+}
+/**
+ * Props for the main ColorPalette component
+ */
+export interface ColorPaletteProps {
+    /** Currently selected color value */
+    selectedColor: string | null;
+    /** Callback when a color is clicked */
+    onClick: (value: string, label: string) => void;
+    /** Optional callback for keyboard navigation */
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+    /** Number of columns in the palette grid */
+    cols?: number;
+    /** Optional CSS class name */
+    className?: string;
+    /** Palette configuration options */
+    paletteOptions: PaletteOptions;
+}
+/**
+ * Props for individual color palette items
+ */
+export interface ColorProps {
+    /** The color value */
+    value: string;
+    /** Display label for accessibility */
+    label: string;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+    /** Whether this color is currently selected */
+    isSelected?: boolean;
+    /** Click handler */
+    onClick: (value: string, label: string) => void;
+    /** Keyboard event handler */
+    onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
+    /** Border color for the swatch */
+    borderColor: string;
+    /** Color for the checkmark icon */
+    checkMarkColor?: string;
+    /** Whether to auto-focus this item */
+    autoFocus?: boolean;
+    /** Function to convert hex to palette color */
+    hexToPaletteColor?: (hexColor: string) => string | undefined;
+    /** Optional decorator element */
+    decorator?: ReactElement;
+}

package/dist/types-ts4.5/ui/ColorPalette/utils.d.ts

@@ -0,0 +1,40 @@
+import type { PaletteColor } from './types';
+/**
+ * Default number of columns in the color picker
+ */
+export declare const DEFAULT_COLOR_PICKER_COLUMNS = 7;
+/**
+ * Splits a palette array into rows based on the specified number of columns
+ * @param palette - Array of palette colors
+ * @param cols - Number of columns per row
+ * @returns Array of color rows
+ */
+export declare function getColorsPerRowFromPalette(palette: PaletteColor[], cols?: number): PaletteColor[][];
+/**
+ * Finds the row and column indices of a selected color in the palette grid
+ * @param colorsPerRow - 2D array of colors organized by rows
+ * @param selectedColor - The currently selected color value
+ * @returns Object containing row and column indices
+ */
+export declare function getSelectedRowAndColumn(colorsPerRow: PaletteColor[][], selectedColor: string | null): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * Finds the row and column indices of a selected color in a flat palette array
+ * @param palette - Flat array of palette colors
+ * @param selectedColor - The currently selected color value
+ * @param cols - Number of columns per row
+ * @returns Object containing row and column indices
+ */
+export declare function getSelectedRowAndColumnFromPalette(palette: PaletteColor[], selectedColor: string | null, cols?: number): {
+    selectedRowIndex: number;
+    selectedColumnIndex: number;
+};
+/**
+ * Extracts the actual color value from a CSS variable expression
+ * Handles both token variables and fallback values
+ * @param variableExpression - CSS variable expression (e.g., "var(--ds-background-accent-blue-subtle, #0052CC)")
+ * @returns The resolved color value or empty string if not found
+ */
+export declare const getTokenCSSVariableValue: (variableExpression: string) => string;