Controls: Add maxPresetColors option to ColorControl

code/addons/docs/src/blocks/controls/Color.stories.tsx

@@ -6,7 +6,10 @@ import { ColorControl } from './Color';
 
 const meta = {
   component: ColorControl,
-  parameters: { withRawArg: 'value', controls: { include: ['value', 'startOpen'] } },
+  parameters: {
+    withRawArg: 'value',
+    controls: { include: ['value', 'startOpen'] },
+  },
   tags: ['autodocs'],
   argTypes: {
     value: {
@@ -65,6 +68,51 @@ export const WithPresetColors: Story = {
   },
 };
 
+export const WithMaxPresetColors: Story = {
+  name: 'With maxPresetColors (limit to 5)',
+  args: {
+    value: '#00ffff',
+    startOpen: true,
+    maxPresetColors: 5,
+    presetColors: [
+      { color: '#ff4785', title: 'Coral' },
+      { color: '#1EA7FD', title: 'Ocean' },
+      { color: 'rgb(252, 82, 31)', title: 'Orange' },
+      { color: 'rgba(255, 174, 0, 0.5)', title: 'Gold' },
+      { color: 'hsl(101, 52%, 49%)', title: 'Green' },
+      { color: 'hsla(179,65%,53%,0.5)', title: 'Seafoam' },
+      { color: '#6F2CAC', title: 'Purple' },
+      { color: '#2A0481', title: 'Ultraviolet' },
+    ],
+  },
+};
+
+export const WithUnlimitedPresetColors: Story = {
+  name: 'With unlimited presets (maxPresetColors: 0)',
+  args: {
+    value: '#00ffff',
+    startOpen: true,
+    maxPresetColors: 0,
+    presetColors: Array.from({ length: 40 }, (_, i) => {
+      const hue = Math.round((i / 40) * 360);
+      return { color: `hsl(${hue}, 70%, 50%)`, title: `Color ${i + 1}` };
+    }),
+  },
+};
+
+export const WithInvalidMaxPresetColors: Story = {
+  name: 'With invalid maxPresetColors (negative, falls back to 27)',
+  args: {
+    value: '#00ffff',
+    startOpen: true,
+    maxPresetColors: -5,
+    presetColors: Array.from({ length: 40 }, (_, i) => {
+      const hue = Math.round((i / 40) * 360);
+      return { color: `hsl(${hue}, 70%, 50%)`, title: `Color ${i + 1}` };
+    }),
+  },
+};
+
 export const StartOpen: Story = {
   args: {
     startOpen: true,

code/addons/docs/src/blocks/controls/Color.tsx

@@ -307,7 +307,8 @@ const id = (value: string) => value.replace(/\s*/, '').toLowerCase();
 const usePresets = (
   presetColors: PresetColor[],
   currentColor: ParsedColor | undefined,
-  colorSpace: ColorSpace
+  colorSpace: ColorSpace,
+  maxPresetColors = 27
 ) => {
   const [selectedColors, setSelectedColors] = useState(currentColor?.valid ? [currentColor] : []);
 
@@ -330,8 +331,13 @@ const usePresets = (
       }
       return parseValue(preset.color);
     });
-    return initialPresets.concat(selectedColors).filter(Boolean).slice(-27);
-  }, [presetColors, selectedColors]);
+    const combined = initialPresets.concat(selectedColors).filter(Boolean);
+    if (maxPresetColors === 0 || maxPresetColors === Infinity) {
+      return combined;
+    }
+    const limit = Number.isInteger(maxPresetColors) && maxPresetColors > 0 ? maxPresetColors : 27;
+    return combined.slice(-limit);
+  }, [presetColors, selectedColors, maxPresetColors]);
 
   const addPreset: (color: ParsedColor) => void = useCallback(
     (color) => {
@@ -366,6 +372,7 @@ export const ColorControl: FC<ColorControlProps> = ({
   onFocus,
   onBlur,
   presetColors,
+  maxPresetColors,
   startOpen = false,
   argType,
 }) => {
@@ -374,7 +381,7 @@ export const ColorControl: FC<ColorControlProps> = ({
     initialValue,
     debouncedOnChange
   );
-  const { presets, addPreset } = usePresets(presetColors ?? [], color, colorSpace);
+  const { presets, addPreset } = usePresets(presetColors ?? [], color, colorSpace, maxPresetColors);
   const Picker = ColorPicker[colorSpace];
 
   const readOnly = !!argType?.table?.readonly;

code/addons/docs/src/blocks/controls/types.ts

@@ -18,6 +18,14 @@ export type ColorValue = string;
 export type PresetColor = ColorValue | { color: ColorValue; title?: string };
 export interface ColorConfig {
   presetColors?: PresetColor[];
+  /**
+   * Maximum number of preset colors shown in the color picker. When the number of presets exceeds
+   * this value, the oldest presets are removed first (most-recently-used order). Set to `Infinity`
+   * or `0` to disable the limit and show all presets.
+   *
+   * @default 27
+   */
+  maxPresetColors?: number;
   /**
    * Whether the color picker should be open by default when rendered.
    *