@luzmo/analytics-components-kit 1.0.3-beta.10 → 1.0.3-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.3-beta.10",
+  "version": "1.0.3-beta.12",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",

package/react/components/ai-chat.component.ts

@@ -1,18 +1,18 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatStepEvent } from '@luzmo/analytics-components-kit/ai-chat';
+import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatMessageSentEventDetail, AiChatStepEvent } from '@luzmo/analytics-components-kit/ai-chat';
 
 const LuzmoAiChatComponent = createComponent({
   tagName: 'luzmo-ai-chat',
   elementClass: LuzmoAiChatClass,
   react: React,
   events: {
-    onLuzmoMessageSent: 'luzmo-message-sent' as EventName<CustomEvent>,
-    onLuzmoDatasetsChanged: 'luzmo-datasets-changed' as EventName<CustomEvent>,
+    onLuzmoMessageSent: 'luzmo-message-sent' as EventName<CustomEvent<AiChatMessageSentEventDetail>>,
+    onLuzmoDatasetsChanged: 'luzmo-datasets-changed' as EventName<CustomEvent<AiChatDatasetsChangedEventDetail>>,
     onLuzmoStep: 'luzmo-step' as EventName<CustomEvent<AiChatStepEvent>>,
     onLuzmoComplete: 'luzmo-complete' as EventName<CustomEvent<AiChatCompleteEvent>>,
-    onLuzmoStop: 'luzmo-stop' as EventName<CustomEvent>,
-    onLuzmoConversationIdChanged: 'luzmo-conversation-id-changed' as EventName<CustomEvent>
+    onLuzmoStop: 'luzmo-stop' as EventName<CustomEvent<void>>,
+    onLuzmoConversationIdChanged: 'luzmo-conversation-id-changed' as EventName<CustomEvent<AiChatConversationIdChangedEventDetail>>
   }
 });
 
@@ -29,12 +29,12 @@ const LuzmoAiChatComponent = createComponent({
 export const LuzmoAiChat = LuzmoAiChatComponent as ReactWebComponent<
   LuzmoAiChatClass,
   {
-    onLuzmoMessageSent: EventName<CustomEvent>;
-    onLuzmoDatasetsChanged: EventName<CustomEvent>;
+    onLuzmoMessageSent: EventName<CustomEvent<AiChatMessageSentEventDetail>>;
+    onLuzmoDatasetsChanged: EventName<CustomEvent<AiChatDatasetsChangedEventDetail>>;
     onLuzmoStep: EventName<CustomEvent<AiChatStepEvent>>;
     onLuzmoComplete: EventName<CustomEvent<AiChatCompleteEvent>>;
-    onLuzmoStop: EventName<CustomEvent>;
-    onLuzmoConversationIdChanged: EventName<CustomEvent>;
+    onLuzmoStop: EventName<CustomEvent<void>>;
+    onLuzmoConversationIdChanged: EventName<CustomEvent<AiChatConversationIdChangedEventDetail>>;
   }
 >;
 

package/react/components/ai-interaction-textarea/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/components/ai-interaction-textarea/types.ts

@@ -0,0 +1,6 @@
+import type { Dataset } from '../../types/dataset.types';
+
+export interface PromptSubmittedEventDetail {
+  prompt: string;
+  selectedDatasets: Dataset[];
+}

package/react/components/ai-interaction-textarea.component.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoAiInteractionTextarea as LuzmoAiInteractionTextareaClass } from '@luzmo/analytics-components-kit/ai-interaction-textarea';
+import { LuzmoAiInteractionTextarea as LuzmoAiInteractionTextareaClass, PromptSubmittedEventDetail } from '@luzmo/analytics-components-kit/ai-interaction-textarea';
 
 const LuzmoAiInteractionTextareaComponent = createComponent({
   tagName: 'luzmo-ai-interaction-textarea',
   elementClass: LuzmoAiInteractionTextareaClass,
   react: React,
   events: {
-    onPromptSubmitted: 'prompt-submitted' as EventName<CustomEvent>,
-    onPromptStopped: 'prompt-stopped' as EventName<CustomEvent>
+    onPromptSubmitted: 'prompt-submitted' as EventName<CustomEvent<PromptSubmittedEventDetail>>,
+    onPromptStopped: 'prompt-stopped' as EventName<CustomEvent<void>>
   }
 });
 
@@ -21,8 +21,8 @@ const LuzmoAiInteractionTextareaComponent = createComponent({
 export const LuzmoAiInteractionTextarea = LuzmoAiInteractionTextareaComponent as ReactWebComponent<
   LuzmoAiInteractionTextareaClass,
   {
-    onPromptSubmitted: EventName<CustomEvent>;
-    onPromptStopped: EventName<CustomEvent>;
+    onPromptSubmitted: EventName<CustomEvent<PromptSubmittedEventDetail>>;
+    onPromptStopped: EventName<CustomEvent<void>>;
   }
 >;
 

package/react/components/data-field-level.component.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDataFieldLevel as LuzmoDataFieldLevelClass, DatasetDataField } from '@luzmo/analytics-components-kit/data-field-level';
+import { LuzmoDataFieldLevel as LuzmoDataFieldLevelClass, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail } from '@luzmo/analytics-components-kit/data-field-level';
 
 const LuzmoDataFieldLevelComponent = createComponent({
   tagName: 'luzmo-data-field-level',
   elementClass: LuzmoDataFieldLevelClass,
   react: React,
   events: {
-    onLuzmoDataFieldDropped: 'luzmo-data-field-dropped' as EventName<CustomEvent<{data: DatasetDataField}>>,
-    onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started' as EventName<CustomEvent<{data: DatasetDataField}>>
+    onLuzmoDataFieldDropped: 'luzmo-data-field-dropped' as EventName<CustomEvent<DataFieldDroppedEventDetail>>,
+    onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started' as EventName<CustomEvent<DataFieldDragStartedEventDetail>>
   }
 });
 
@@ -21,8 +21,8 @@ const LuzmoDataFieldLevelComponent = createComponent({
 export const LuzmoDataFieldLevel = LuzmoDataFieldLevelComponent as ReactWebComponent<
   LuzmoDataFieldLevelClass,
   {
-    onLuzmoDataFieldDropped: EventName<CustomEvent<{data: DatasetDataField}>>;
-    onLuzmoDataFieldDragStarted: EventName<CustomEvent<{data: DatasetDataField}>>;
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
   }
 >;
 

package/react/components/data-field-panel.component.ts

@@ -1,15 +1,15 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDataFieldPanel as LuzmoDataFieldPanelClass } from '@luzmo/analytics-components-kit/data-field-panel';
+import { LuzmoDataFieldPanel as LuzmoDataFieldPanelClass, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail, DatasetChangedEventDetail } from '@luzmo/analytics-components-kit/data-field-panel';
 
 const LuzmoDataFieldPanelComponent = createComponent({
   tagName: 'luzmo-data-field-panel',
   elementClass: LuzmoDataFieldPanelClass,
   react: React,
   events: {
-    onLuzmoDatasetChanged: 'luzmo-dataset-changed' as EventName<CustomEvent>,
-    onLuzmoDataFieldDropped: 'luzmo-data-field-dropped' as EventName<CustomEvent>,
-    onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started' as EventName<CustomEvent>
+    onLuzmoDatasetChanged: 'luzmo-dataset-changed' as EventName<CustomEvent<DatasetChangedEventDetail>>,
+    onLuzmoDataFieldDropped: 'luzmo-data-field-dropped' as EventName<CustomEvent<DataFieldDroppedEventDetail>>,
+    onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started' as EventName<CustomEvent<DataFieldDragStartedEventDetail>>
   }
 });
 
@@ -28,9 +28,9 @@ const LuzmoDataFieldPanelComponent = createComponent({
 export const LuzmoDataFieldPanel = LuzmoDataFieldPanelComponent as ReactWebComponent<
   LuzmoDataFieldPanelClass,
   {
-    onLuzmoDatasetChanged: EventName<CustomEvent>;
-    onLuzmoDataFieldDropped: EventName<CustomEvent>;
-    onLuzmoDataFieldDragStarted: EventName<CustomEvent>;
+    onLuzmoDatasetChanged: EventName<CustomEvent<DatasetChangedEventDetail>>;
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
   }
 >;
 

package/react/components/data-field.component.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDataField as LuzmoDataFieldClass, DatasetDataField } from '@luzmo/analytics-components-kit/data-field';
+import { LuzmoDataField as LuzmoDataFieldClass, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail } from '@luzmo/analytics-components-kit/data-field';
 
 const LuzmoDataFieldComponent = createComponent({
   tagName: 'luzmo-data-field',
   elementClass: LuzmoDataFieldClass,
   react: React,
   events: {
-    onLuzmoDataFieldDropped: 'luzmo-data-field-dropped' as EventName<CustomEvent<{data: DatasetDataField}>>,
-    onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started' as EventName<CustomEvent<{data: DatasetDataField}>>
+    onLuzmoDataFieldDropped: 'luzmo-data-field-dropped' as EventName<CustomEvent<DataFieldDroppedEventDetail>>,
+    onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started' as EventName<CustomEvent<DataFieldDragStartedEventDetail>>
   }
 });
 
@@ -21,8 +21,8 @@ const LuzmoDataFieldComponent = createComponent({
 export const LuzmoDataField = LuzmoDataFieldComponent as ReactWebComponent<
   LuzmoDataFieldClass,
   {
-    onLuzmoDataFieldDropped: EventName<CustomEvent<{data: DatasetDataField}>>;
-    onLuzmoDataFieldDragStarted: EventName<CustomEvent<{data: DatasetDataField}>>;
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
   }
 >;
 

package/react/components/data-fields-select/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/components/data-fields-select/types.ts

@@ -0,0 +1,5 @@
+import type { DatasetDataField } from '../../types/dataset-data-field.types';
+
+export interface DataFieldsSelectedEventDetail {
+  dataFields: DatasetDataField[];
+}

package/react/components/data-fields-select.component.ts

@@ -1,25 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDataFieldsSelect as LuzmoDataFieldsSelectClass } from '@luzmo/analytics-components-kit/data-fields-select';
+import { LuzmoDataFieldsSelect as LuzmoDataFieldsSelectClass, DataFieldsSelectedEventDetail } from '@luzmo/analytics-components-kit/data-fields-select';
 
 const LuzmoDataFieldsSelectComponent = createComponent({
   tagName: 'luzmo-data-fields-select',
   elementClass: LuzmoDataFieldsSelectClass,
   react: React,
   events: {
-    onLuzmoDataFieldsSelected: 'luzmo-data-fields-selected' as EventName<CustomEvent>
+    onLuzmoDataFieldsSelected: 'luzmo-data-fields-selected' as EventName<CustomEvent<DataFieldsSelectedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-data-fields-select>
  *
- * @event onLuzmoDataFieldsSelected - Emitted when data fields are selected. Event detail contains `{ dataFields: DatasetDataField[] }`
+ * @event onLuzmoDataFieldsSelected - Emitted when data fields are selected
  */
 export const LuzmoDataFieldsSelect = LuzmoDataFieldsSelectComponent as ReactWebComponent<
   LuzmoDataFieldsSelectClass,
   {
-    onLuzmoDataFieldsSelected: EventName<CustomEvent>;
+    onLuzmoDataFieldsSelected: EventName<CustomEvent<DataFieldsSelectedEventDetail>>;
   }
 >;
 

package/react/components/dataset-selector-list.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDatasetSelectorList as LuzmoDatasetSelectorListClass } from '@luzmo/analytics-components-kit/dataset-selector-list';
+import { LuzmoDatasetSelectorList as LuzmoDatasetSelectorListClass, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-list';
 
 const LuzmoDatasetSelectorListComponent = createComponent({
   tagName: 'luzmo-dataset-selector-list',
   elementClass: LuzmoDatasetSelectorListClass,
   react: React,
   events: {
-    onDatasetSelected: 'dataset-selected' as EventName<CustomEvent>
+    onDatasetSelected: 'dataset-selected' as EventName<CustomEvent<Dataset>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoDatasetSelectorListComponent = createComponent({
 export const LuzmoDatasetSelectorList = LuzmoDatasetSelectorListComponent as ReactWebComponent<
   LuzmoDatasetSelectorListClass,
   {
-    onDatasetSelected: EventName<CustomEvent>;
+    onDatasetSelected: EventName<CustomEvent<Dataset>>;
   }
 >;
 

package/react/components/dataset-selector-row.component.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowClass } from '@luzmo/analytics-components-kit/dataset-selector-row';
+import { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowClass, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-row';
 
 const LuzmoDatasetSelectorRowComponent = createComponent({
   tagName: 'luzmo-dataset-selector-row',
   elementClass: LuzmoDatasetSelectorRowClass,
   react: React,
   events: {
-    onDatasetSelected: 'dataset-selected' as EventName<CustomEvent>,
-    onDatasetRemoved: 'dataset-removed' as EventName<CustomEvent>
+    onDatasetSelected: 'dataset-selected' as EventName<CustomEvent<Dataset>>,
+    onDatasetRemoved: 'dataset-removed' as EventName<CustomEvent<Dataset>>
   }
 });
 
@@ -21,8 +21,8 @@ const LuzmoDatasetSelectorRowComponent = createComponent({
 export const LuzmoDatasetSelectorRow = LuzmoDatasetSelectorRowComponent as ReactWebComponent<
   LuzmoDatasetSelectorRowClass,
   {
-    onDatasetSelected: EventName<CustomEvent>;
-    onDatasetRemoved: EventName<CustomEvent>;
+    onDatasetSelected: EventName<CustomEvent<Dataset>>;
+    onDatasetRemoved: EventName<CustomEvent<Dataset>>;
   }
 >;
 

package/react/components/display-settings/types.ts

@@ -1,4 +1,10 @@
-import { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+import type { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+
+export interface DisplaySettingsSlotContentChangedEventDetail {
+  slotContent: GenericSlotContent;
+}
+
+export type DisplaySettingsRemoveSlotContentEventDetail = DisplaySettingsSlotContentChangedEventDetail;
 
 export interface InfoVisibilityChangedEventDetail {
   isVisible: boolean;

package/react/components/display-settings-binning.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettingsBinning as LuzmoDisplaySettingsBinningClass } from '@luzmo/analytics-components-kit/display-settings-binning';
+import { LuzmoDisplaySettingsBinning as LuzmoDisplaySettingsBinningClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-binning';
 
 const LuzmoDisplaySettingsBinningComponent = createComponent({
   tagName: 'luzmo-display-settings-binning',
   elementClass: LuzmoDisplaySettingsBinningClass,
   react: React,
   events: {
-    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent>
+    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoDisplaySettingsBinningComponent = createComponent({
 export const LuzmoDisplaySettingsBinning = LuzmoDisplaySettingsBinningComponent as ReactWebComponent<
   LuzmoDisplaySettingsBinningClass,
   {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
   }
 >;
 

package/react/components/display-settings-datetime.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettingsDatetime as LuzmoDisplaySettingsDatetimeClass } from '@luzmo/analytics-components-kit/display-settings-datetime';
+import { LuzmoDisplaySettingsDatetime as LuzmoDisplaySettingsDatetimeClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-datetime';
 
 const LuzmoDisplaySettingsDatetimeComponent = createComponent({
   tagName: 'luzmo-display-settings-datetime',
   elementClass: LuzmoDisplaySettingsDatetimeClass,
   react: React,
   events: {
-    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent>
+    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoDisplaySettingsDatetimeComponent = createComponent({
 export const LuzmoDisplaySettingsDatetime = LuzmoDisplaySettingsDatetimeComponent as ReactWebComponent<
   LuzmoDisplaySettingsDatetimeClass,
   {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
   }
 >;
 

package/react/components/display-settings-grand-totals.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettingsGrandTotals as LuzmoDisplaySettingsGrandTotalsClass } from '@luzmo/analytics-components-kit/display-settings-grand-totals';
+import { LuzmoDisplaySettingsGrandTotals as LuzmoDisplaySettingsGrandTotalsClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-grand-totals';
 
 const LuzmoDisplaySettingsGrandTotalsComponent = createComponent({
   tagName: 'luzmo-display-settings-grand-totals',
   elementClass: LuzmoDisplaySettingsGrandTotalsClass,
   react: React,
   events: {
-    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent>
+    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoDisplaySettingsGrandTotalsComponent = createComponent({
 export const LuzmoDisplaySettingsGrandTotals = LuzmoDisplaySettingsGrandTotalsComponent as ReactWebComponent<
   LuzmoDisplaySettingsGrandTotalsClass,
   {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
   }
 >;
 

package/react/components/display-settings-numeric.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettingsNumeric as LuzmoDisplaySettingsNumericClass } from '@luzmo/analytics-components-kit/display-settings-numeric';
+import { LuzmoDisplaySettingsNumeric as LuzmoDisplaySettingsNumericClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-numeric';
 
 const LuzmoDisplaySettingsNumericComponent = createComponent({
   tagName: 'luzmo-display-settings-numeric',
   elementClass: LuzmoDisplaySettingsNumericClass,
   react: React,
   events: {
-    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent>
+    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoDisplaySettingsNumericComponent = createComponent({
 export const LuzmoDisplaySettingsNumeric = LuzmoDisplaySettingsNumericComponent as ReactWebComponent<
   LuzmoDisplaySettingsNumericClass,
   {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
   }
 >;
 

package/react/components/display-settings-period-over-period.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettingsPeriodOverPeriod as LuzmoDisplaySettingsPeriodOverPeriodClass } from '@luzmo/analytics-components-kit/display-settings-period-over-period';
+import { LuzmoDisplaySettingsPeriodOverPeriod as LuzmoDisplaySettingsPeriodOverPeriodClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-period-over-period';
 
 const LuzmoDisplaySettingsPeriodOverPeriodComponent = createComponent({
   tagName: 'luzmo-display-settings-period-over-period',
   elementClass: LuzmoDisplaySettingsPeriodOverPeriodClass,
   react: React,
   events: {
-    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent>
+    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoDisplaySettingsPeriodOverPeriodComponent = createComponent({
 export const LuzmoDisplaySettingsPeriodOverPeriod = LuzmoDisplaySettingsPeriodOverPeriodComponent as ReactWebComponent<
   LuzmoDisplaySettingsPeriodOverPeriodClass,
   {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
   }
 >;
 

package/react/components/display-settings.component.ts

@@ -1,15 +1,15 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDisplaySettings as LuzmoDisplaySettingsClass } from '@luzmo/analytics-components-kit/display-settings';
+import { LuzmoDisplaySettings as LuzmoDisplaySettingsClass, DisplaySettingsRemoveSlotContentEventDetail, DisplaySettingsSlotContentChangedEventDetail, InfoVisibilityChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings';
 
 const LuzmoDisplaySettingsComponent = createComponent({
   tagName: 'luzmo-display-settings',
   elementClass: LuzmoDisplaySettingsClass,
   react: React,
   events: {
-    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent>,
-    onLuzmoRemoveSlotContent: 'luzmo-remove-slot-content' as EventName<CustomEvent>,
-    onLuzmoInfoVisibilityChanged: 'luzmo-info-visibility-changed' as EventName<CustomEvent>
+    onLuzmoSlotContentChanged: 'luzmo-slot-content-changed' as EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>,
+    onLuzmoRemoveSlotContent: 'luzmo-remove-slot-content' as EventName<CustomEvent<DisplaySettingsRemoveSlotContentEventDetail>>,
+    onLuzmoInfoVisibilityChanged: 'luzmo-info-visibility-changed' as EventName<CustomEvent<InfoVisibilityChangedEventDetail>>
   }
 });
 
@@ -23,9 +23,9 @@ const LuzmoDisplaySettingsComponent = createComponent({
 export const LuzmoDisplaySettings = LuzmoDisplaySettingsComponent as ReactWebComponent<
   LuzmoDisplaySettingsClass,
   {
-    onLuzmoSlotContentChanged: EventName<CustomEvent>;
-    onLuzmoRemoveSlotContent: EventName<CustomEvent>;
-    onLuzmoInfoVisibilityChanged: EventName<CustomEvent>;
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+    onLuzmoRemoveSlotContent: EventName<CustomEvent<DisplaySettingsRemoveSlotContentEventDetail>>;
+    onLuzmoInfoVisibilityChanged: EventName<CustomEvent<InfoVisibilityChangedEventDetail>>;
   }
 >;
 

package/react/components/filters/types.ts

@@ -1,3 +1,9 @@
+import type { ItemFilterGroup } from '@luzmo/dashboard-contents-types';
+
+export interface FiltersChangedEventDetail {
+  filters: ItemFilterGroup[];
+}
+
 export interface FilterCondition {
   expression?: string;
   parameters?: unknown[];

package/react/components/filters.component.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoFilters as LuzmoFiltersClass } from '@luzmo/analytics-components-kit/filters';
+import { LuzmoFilters as LuzmoFiltersClass, FiltersChangedEventDetail } from '@luzmo/analytics-components-kit/filters';
 
 const LuzmoFiltersComponent = createComponent({
   tagName: 'luzmo-filters',
   elementClass: LuzmoFiltersClass,
   react: React,
   events: {
-    onLuzmoFiltersChanged: 'luzmo-filters-changed' as EventName<CustomEvent>
+    onLuzmoFiltersChanged: 'luzmo-filters-changed' as EventName<CustomEvent<FiltersChangedEventDetail>>
   }
 });
 
@@ -19,7 +19,7 @@ const LuzmoFiltersComponent = createComponent({
 export const LuzmoFilters = LuzmoFiltersComponent as ReactWebComponent<
   LuzmoFiltersClass,
   {
-    onLuzmoFiltersChanged: EventName<CustomEvent>;
+    onLuzmoFiltersChanged: EventName<CustomEvent<FiltersChangedEventDetail>>;
   }
 >;
 

package/react/components/item-grid.component.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemGrid as LuzmoItemGridClass } from '@luzmo/analytics-components-kit/item-grid';
+import { LuzmoItemGrid as LuzmoItemGridClass, GridItemActionEventDetail, GridItemStatesChangedEventDetail, GridLifecycleEventDetail } from '@luzmo/analytics-components-kit/item-grid';
 
 const LuzmoItemGridComponent = createComponent({
   tagName: 'luzmo-item-grid',
   elementClass: LuzmoItemGridClass,
   react: React,
   events: {
-    onLuzmoItemGridItemAction: 'luzmo-item-grid-item-action' as EventName<CustomEvent>,
-    onLuzmoItemGridLayoutChanged: 'luzmo-item-grid-layout-changed' as EventName<CustomEvent>,
-    onLuzmoItemGridReady: 'luzmo-item-grid-ready' as EventName<CustomEvent>,
-    onLuzmoItemGridItemStatesChanged: 'luzmo-item-grid-item-states-changed' as EventName<CustomEvent>
+    onLuzmoItemGridItemAction: 'luzmo-item-grid-item-action' as EventName<CustomEvent<GridItemActionEventDetail>>,
+    onLuzmoItemGridLayoutChanged: 'luzmo-item-grid-layout-changed' as EventName<CustomEvent<GridLifecycleEventDetail>>,
+    onLuzmoItemGridReady: 'luzmo-item-grid-ready' as EventName<CustomEvent<GridLifecycleEventDetail>>,
+    onLuzmoItemGridItemStatesChanged: 'luzmo-item-grid-item-states-changed' as EventName<CustomEvent<GridItemStatesChangedEventDetail>>
   }
 });
 
@@ -25,10 +25,10 @@ const LuzmoItemGridComponent = createComponent({
 export const LuzmoItemGrid = LuzmoItemGridComponent as ReactWebComponent<
   LuzmoItemGridClass,
   {
-    onLuzmoItemGridItemAction: EventName<CustomEvent>;
-    onLuzmoItemGridLayoutChanged: EventName<CustomEvent>;
-    onLuzmoItemGridReady: EventName<CustomEvent>;
-    onLuzmoItemGridItemStatesChanged: EventName<CustomEvent>;
+    onLuzmoItemGridItemAction: EventName<CustomEvent<GridItemActionEventDetail>>;
+    onLuzmoItemGridLayoutChanged: EventName<CustomEvent<GridLifecycleEventDetail>>;
+    onLuzmoItemGridReady: EventName<CustomEvent<GridLifecycleEventDetail>>;
+    onLuzmoItemGridItemStatesChanged: EventName<CustomEvent<GridItemStatesChangedEventDetail>>;
   }
 >;
 

package/react/components/item-option/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/react/components/item-option/types.ts

@@ -0,0 +1,10 @@
+import type { OptionsConfig } from '@luzmo/dashboard-contents-types';
+
+export interface ItemOptionChangedEventDetail {
+  value?: unknown;
+  values?: Record<string, number | undefined>;
+}
+
+export interface ItemOptionsChangedEventDetail {
+  options: OptionsConfig;
+}

package/react/components/item-option-action-button-group.component.ts

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionActionButtonGroup as LuzmoItemOptionActionButtonGroupClass } from '@luzmo/analytics-components-kit/item-option-action-button-group';
+import { LuzmoItemOptionActionButtonGroup as LuzmoItemOptionActionButtonGroupClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-action-button-group';
 
 const LuzmoItemOptionActionButtonGroupComponent = createComponent({
   tagName: 'luzmo-item-option-action-button-group',
   elementClass: LuzmoItemOptionActionButtonGroupClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-action-button-group>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionActionButtonGroup = LuzmoItemOptionActionButtonGroupComponent as ReactWebComponent<
   LuzmoItemOptionActionButtonGroupClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;
 

package/react/components/item-option-color-palette-picker.component.ts

@@ -1,23 +1,25 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoItemOptionColorPalettePicker as LuzmoItemOptionColorPalettePickerClass } from '@luzmo/analytics-components-kit/item-option-color-palette-picker';
+import { LuzmoItemOptionColorPalettePicker as LuzmoItemOptionColorPalettePickerClass, ItemOptionChangedEventDetail } from '@luzmo/analytics-components-kit/item-option-color-palette-picker';
 
 const LuzmoItemOptionColorPalettePickerComponent = createComponent({
   tagName: 'luzmo-item-option-color-palette-picker',
   elementClass: LuzmoItemOptionColorPalettePickerClass,
   react: React,
   events: {
-    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent<ItemOptionChangedEventDetail>>
   }
 });
 
 /**
  * React wrapper for <luzmo-item-option-color-palette-picker>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the option value changes.
  */
 export const LuzmoItemOptionColorPalettePicker = LuzmoItemOptionColorPalettePickerComponent as ReactWebComponent<
   LuzmoItemOptionColorPalettePickerClass,
   {
-    onLuzmoOptionChanged: EventName<CustomEvent>;
+    onLuzmoOptionChanged: EventName<CustomEvent<ItemOptionChangedEventDetail>>;
   }
 >;