@luzmo/analytics-components-kit 1.0.8 → 1.0.9-beta.2

package/deprecated-react/components/ai-chat.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/ai-chat.component.js');

package/deprecated-react/components/ai-interaction-textarea.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/ai-interaction-textarea.component.js');

package/deprecated-react/components/data-field-level.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/data-field-level.component.js');

package/deprecated-react/components/data-fields-select.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/data-fields-select.component.js');

package/deprecated-react/components/dataset-icon.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/dataset-icon.component.js');

package/deprecated-react/components/dataset-selector-list.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/dataset-selector-list.component.js');

package/deprecated-react/components/dataset-selector-row.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/dataset-selector-row.component.js');

package/deprecated-react/components/display-settings-binning.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/display-settings-binning.component.js');

package/deprecated-react/components/display-settings-datetime.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/display-settings-datetime.component.js');

package/deprecated-react/components/display-settings-grand-totals.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/display-settings-grand-totals.component.js');

package/deprecated-react/components/display-settings-numeric.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/display-settings-numeric.component.js');

package/deprecated-react/components/display-settings-period-over-period.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/display-settings-period-over-period.component.js');

package/deprecated-react/components/display-settings.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/display-settings.component.js');

package/deprecated-react/components/filter-expression-picker.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/filter-expression-picker.component.js');

package/deprecated-react/components/filter-item.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/filter-item.component.js');

package/deprecated-react/components/filter-parameter-picker.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/filter-parameter-picker.component.js');

package/deprecated-react/components/filter-value-picker-datetime.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/filter-value-picker-datetime.component.js');

package/deprecated-react/components/filter-value-picker-hierarchy.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/filter-value-picker-hierarchy.component.js');

package/deprecated-react/components/filter-value-picker-numeric.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/filter-value-picker-numeric.component.js');

package/deprecated-react/components/filter-value-picker.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/filter-value-picker.component.js');

package/deprecated-react/components/formula-field.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/formula-field.component.js');

package/deprecated-react/components/interactive-viz-item.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/interactive-viz-item.component.js');

package/deprecated-react/components/slot-menu-list.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/slot-menu-list.component.js');

package/deprecated-react/components/slot-menu.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/slot-menu.component.js');

package/deprecated-react/components/viz-item-menu.component.cjs

@@ -0,0 +1 @@
+module.exports = require('../../react/esm/components/viz-item-menu.component.js');

package/index.d.ts

@@ -1,9 +1,23 @@
+export * from './components/ai-chat';
+export * from './components/interactive-viz-item';
+export * from './components/ai-interaction-textarea';
+export * from './components/dataset-icon';
+export * from './components/dataset-selector-list';
+export * from './components/dataset-selector-row';
+export * from './components/display-settings';
+export * from './components/display-settings-binning';
+export * from './components/display-settings-datetime';
+export * from './components/display-settings-grand-totals';
+export * from './components/display-settings-numeric';
+export * from './components/display-settings-period-over-period';
 export * from './components/data-field';
+export * from './components/data-field-level';
 export * from './components/data-field-panel';
 export * from './components/item-slot-drop';
 export * from './components/item-option-panel';
 export * from './components/filters';
 export * from './components/formula';
+export * from './components/formula-field';
 export * from './components/formula-editor';
 export * from './components/item-option';
 export * from './components/item-option-action-button-group';
@@ -20,10 +34,21 @@ export * from './components/item-option-radio-button-group';
 export * from './components/item-option-slider';
 export * from './components/item-option-switch';
 export * from './components/item-option-text-field';
+export * from './components/data-fields-select';
+export * from './components/filter-expression-picker';
+export * from './components/filter-item';
+export * from './components/filter-parameter-picker';
+export * from './components/filter-value-picker';
+export * from './components/filter-value-picker-datetime';
+export * from './components/filter-value-picker-hierarchy';
+export * from './components/filter-value-picker-numeric';
 export * from './components/item-grid';
 export * from './components/item-slot-drop-panel';
 export * from './components/item-slot-picker-panel';
 export * from './components/item-slot-picker';
+export * from './components/slot-menu';
+export * from './components/slot-menu-list';
+export * from './components/viz-item-menu';
 export * from './item-definitions/item-list';
 export * from './types';
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.8",
+  "version": "1.0.9-beta.2",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",
@@ -11,16 +11,116 @@
       "import": "./components/index.js",
       "require": "./components/index.cjs"
     },
+    "./ai-chat": {
+      "types": "./components/ai-chat/index.d.ts",
+      "import": "./components/ai-chat/index.js",
+      "require": "./components/ai-chat/index.cjs"
+    },
+    "./ai-interaction-textarea": {
+      "types": "./components/ai-interaction-textarea/index.d.ts",
+      "import": "./components/ai-interaction-textarea/index.js",
+      "require": "./components/ai-interaction-textarea/index.cjs"
+    },
     "./data-field": {
       "types": "./components/data-field/index.d.ts",
       "import": "./components/data-field/index.js",
       "require": "./components/data-field/index.cjs"
     },
+    "./data-field-level": {
+      "types": "./components/data-field-level/index.d.ts",
+      "import": "./components/data-field-level/index.js",
+      "require": "./components/data-field-level/index.cjs"
+    },
     "./data-field-panel": {
       "types": "./components/data-field-panel/index.d.ts",
       "import": "./components/data-field-panel/index.js",
       "require": "./components/data-field-panel/index.cjs"
     },
+    "./data-fields-select": {
+      "types": "./components/data-fields-select/index.d.ts",
+      "import": "./components/data-fields-select/index.js",
+      "require": "./components/data-fields-select/index.cjs"
+    },
+    "./dataset-icon": {
+      "types": "./components/dataset-icon/index.d.ts",
+      "import": "./components/dataset-icon/index.js",
+      "require": "./components/dataset-icon/index.cjs"
+    },
+    "./dataset-selector-list": {
+      "types": "./components/dataset-selector-list/index.d.ts",
+      "import": "./components/dataset-selector-list/index.js",
+      "require": "./components/dataset-selector-list/index.cjs"
+    },
+    "./dataset-selector-row": {
+      "types": "./components/dataset-selector-row/index.d.ts",
+      "import": "./components/dataset-selector-row/index.js",
+      "require": "./components/dataset-selector-row/index.cjs"
+    },
+    "./display-settings": {
+      "types": "./components/display-settings/index.d.ts",
+      "import": "./components/display-settings/index.js",
+      "require": "./components/display-settings/index.cjs"
+    },
+    "./display-settings-binning": {
+      "types": "./components/display-settings-binning/index.d.ts",
+      "import": "./components/display-settings-binning/index.js",
+      "require": "./components/display-settings-binning/index.cjs"
+    },
+    "./display-settings-datetime": {
+      "types": "./components/display-settings-datetime/index.d.ts",
+      "import": "./components/display-settings-datetime/index.js",
+      "require": "./components/display-settings-datetime/index.cjs"
+    },
+    "./display-settings-grand-totals": {
+      "types": "./components/display-settings-grand-totals/index.d.ts",
+      "import": "./components/display-settings-grand-totals/index.js",
+      "require": "./components/display-settings-grand-totals/index.cjs"
+    },
+    "./display-settings-numeric": {
+      "types": "./components/display-settings-numeric/index.d.ts",
+      "import": "./components/display-settings-numeric/index.js",
+      "require": "./components/display-settings-numeric/index.cjs"
+    },
+    "./display-settings-period-over-period": {
+      "types": "./components/display-settings-period-over-period/index.d.ts",
+      "import": "./components/display-settings-period-over-period/index.js",
+      "require": "./components/display-settings-period-over-period/index.cjs"
+    },
+    "./filter-expression-picker": {
+      "types": "./components/filter-expression-picker/index.d.ts",
+      "import": "./components/filter-expression-picker/index.js",
+      "require": "./components/filter-expression-picker/index.cjs"
+    },
+    "./filter-item": {
+      "types": "./components/filter-item/index.d.ts",
+      "import": "./components/filter-item/index.js",
+      "require": "./components/filter-item/index.cjs"
+    },
+    "./filter-parameter-picker": {
+      "types": "./components/filter-parameter-picker/index.d.ts",
+      "import": "./components/filter-parameter-picker/index.js",
+      "require": "./components/filter-parameter-picker/index.cjs"
+    },
+    "./filter-value-picker": {
+      "types": "./components/filter-value-picker/index.d.ts",
+      "import": "./components/filter-value-picker/index.js",
+      "require": "./components/filter-value-picker/index.cjs"
+    },
+    "./filter-value-picker-datetime": {
+      "types": "./components/filter-value-picker-datetime/index.d.ts",
+      "import": "./components/filter-value-picker-datetime/index.js",
+      "require": "./components/filter-value-picker-datetime/index.cjs"
+    },
+    "./filter-value-picker-hierarchy": {
+      "types": "./components/filter-value-picker-hierarchy/index.d.ts",
+      "import": "./components/filter-value-picker-hierarchy/index.js",
+      "require": "./components/filter-value-picker-hierarchy/index.cjs"
+    },
+    "./filter-value-picker-numeric": {
+      "types": "./components/filter-value-picker-numeric/index.d.ts",
+      "import": "./components/filter-value-picker-numeric/index.js",
+      "require": "./components/filter-value-picker-numeric/index.cjs"
+    },
     "./filters": {
       "types": "./components/filters/index.d.ts",
       "import": "./components/filters/index.js",
@@ -36,6 +136,16 @@
       "import": "./components/formula-editor/index.js",
       "require": "./components/formula-editor/index.cjs"
     },
+    "./formula-field": {
+      "types": "./components/formula-field/index.d.ts",
+      "import": "./components/formula-field/index.js",
+      "require": "./components/formula-field/index.cjs"
+    },
+    "./interactive-viz-item": {
+      "types": "./components/interactive-viz-item/index.d.ts",
+      "import": "./components/interactive-viz-item/index.js",
+      "require": "./components/interactive-viz-item/index.cjs"
+    },
     "./item-grid": {
       "types": "./components/item-grid/index.d.ts",
       "import": "./components/item-grid/index.js",
@@ -141,6 +251,21 @@
       "import": "./components/item-slot-picker-panel/index.js",
       "require": "./components/item-slot-picker-panel/index.cjs"
     },
+    "./slot-menu": {
+      "types": "./components/slot-menu/index.d.ts",
+      "import": "./components/slot-menu/index.js",
+      "require": "./components/slot-menu/index.cjs"
+    },
+    "./slot-menu-list": {
+      "types": "./components/slot-menu-list/index.d.ts",
+      "import": "./components/slot-menu-list/index.js",
+      "require": "./components/slot-menu-list/index.cjs"
+    },
+    "./viz-item-menu": {
+      "types": "./components/viz-item-menu/index.d.ts",
+      "import": "./components/viz-item-menu/index.js",
+      "require": "./components/viz-item-menu/index.cjs"
+    },
     "./types": {
       "types": "./types.d.ts",
       "import": "./components/types.js",
@@ -209,7 +334,7 @@
     "@lit/task": "^1.0.1",
     "@luzmo/embed": "^7.5.0",
     "@luzmo/icons": "^1.0.1-alpha.46",
-    "@luzmo/lucero": "^2.2.0",
+    "@luzmo/lucero": "^2.3.0-beta.0",
     "colorjs.io": "^0.5.2",
     "lit": "^3.3.2",
     "yjs": "^13.6.29"

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatMessageSentEventDetail, AiChatStepEvent, AssistantMessageActionEventDetail } 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<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<void>>,
+    onLuzmoConversationIdChanged: 'luzmo-conversation-id-changed' as EventName<CustomEvent<AiChatConversationIdChangedEventDetail>>,
+    onLuzmoAssistantMessageAction: 'luzmo-assistant-message-action' as EventName<CustomEvent<AssistantMessageActionEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-ai-chat>
+ *
+ * @event onLuzmoMessageSent - Fired when a user sends a message
+ * @event onLuzmoDatasetsChanged - Fired when the selected datasets change
+ * @event onLuzmoStep - Fired for every incremental, kit-assembled event during a streamed response (decision, text, progress, dashboard-title/layout/item, chart, custom-item, elicitation, interrupt, plus forward-by-default unrecognized chunks). Use `isRecognizedStep` to narrow.
+ * @event onLuzmoComplete - Fired exactly once per response with the authoritative final result (dashboard/chart/name/customItem) or an `error`.
+ * @event onLuzmoStop - Fired when an in-flight prompt is stopped Custom actions beyond built-in `ChatMessage.actions` buttons can be projected via the `assistant-message-actions` light-DOM slot on the latest assistant message.
+ * @event onLuzmoConversationIdChanged - Fired when the conversation ID is updated from the API
+ * @event onLuzmoAssistantMessageAction - Fired when a built-in assistant message action is activated (after confirmation when `confirm` is set)
+ */
+export const LuzmoAiChat = LuzmoAiChatComponent as ReactWebComponent<
+  LuzmoAiChatClass,
+  {
+    onLuzmoMessageSent: EventName<CustomEvent<AiChatMessageSentEventDetail>>;
+    onLuzmoDatasetsChanged: EventName<CustomEvent<AiChatDatasetsChangedEventDetail>>;
+    onLuzmoStep: EventName<CustomEvent<AiChatStepEvent>>;
+    onLuzmoComplete: EventName<CustomEvent<AiChatCompleteEvent>>;
+    onLuzmoStop: EventName<CustomEvent<void>>;
+    onLuzmoConversationIdChanged: EventName<CustomEvent<AiChatConversationIdChangedEventDetail>>;
+    onLuzmoAssistantMessageAction: EventName<CustomEvent<AssistantMessageActionEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoAiChat */
+export type LuzmoAiChatElement = LuzmoAiChatClass;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+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<PromptSubmittedEventDetail>>,
+    onPromptStopped: 'prompt-stopped' as EventName<CustomEvent<void>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-ai-interaction-textarea>
+ *
+ * @event onPromptSubmitted - Fired when a prompt is submitted with selected datasets
+ * @event onPromptStopped - Fired when a running prompt is stopped
+ */
+export const LuzmoAiInteractionTextarea = LuzmoAiInteractionTextareaComponent as ReactWebComponent<
+  LuzmoAiInteractionTextareaClass,
+  {
+    onPromptSubmitted: EventName<CustomEvent<PromptSubmittedEventDetail>>;
+    onPromptStopped: EventName<CustomEvent<void>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoAiInteractionTextarea */
+export type LuzmoAiInteractionTextareaElement = LuzmoAiInteractionTextareaClass;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+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<DataFieldDroppedEventDetail>>,
+    onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started' as EventName<CustomEvent<DataFieldDragStartedEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-data-field-level>
+ *
+ * @event onLuzmoDataFieldDropped - Announces that the data field has been dropped
+ * @event onLuzmoDataFieldDragStarted - Announces that the drag is started on the data field
+ */
+export const LuzmoDataFieldLevel = LuzmoDataFieldLevelComponent as ReactWebComponent<
+  LuzmoDataFieldLevelClass,
+  {
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDataFieldLevel */
+export type LuzmoDataFieldLevelElement = LuzmoDataFieldLevelClass;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+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<DataFieldsSelectedEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-data-fields-select>
+ *
+ * @event onLuzmoDataFieldsSelected - Emitted when data fields are selected
+ */
+export const LuzmoDataFieldsSelect = LuzmoDataFieldsSelectComponent as ReactWebComponent<
+  LuzmoDataFieldsSelectClass,
+  {
+    onLuzmoDataFieldsSelected: EventName<CustomEvent<DataFieldsSelectedEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDataFieldsSelect */
+export type LuzmoDataFieldsSelectElement = LuzmoDataFieldsSelectClass;

package/react/components/dataset-icon.component.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { createComponent, ReactWebComponent } from '@lit/react';
+import { LuzmoDatasetIcon as LuzmoDatasetIconClass } from '@luzmo/analytics-components-kit/dataset-icon';
+
+const LuzmoDatasetIconComponent = createComponent({
+  tagName: 'luzmo-dataset-icon',
+  elementClass: LuzmoDatasetIconClass,
+  react: React,
+  events: {
+
+  }
+});
+
+/**
+ * React wrapper for <luzmo-dataset-icon>
+ */
+export const LuzmoDatasetIcon = LuzmoDatasetIconComponent as ReactWebComponent<
+  LuzmoDatasetIconClass
+>;
+
+/** The underlying custom element type for LuzmoDatasetIcon */
+export type LuzmoDatasetIconElement = LuzmoDatasetIconClass;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+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<Dataset>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-dataset-selector-list>
+ *
+ * @event onDatasetSelected - Fired when a dataset is selected
+ */
+export const LuzmoDatasetSelectorList = LuzmoDatasetSelectorListComponent as ReactWebComponent<
+  LuzmoDatasetSelectorListClass,
+  {
+    onDatasetSelected: EventName<CustomEvent<Dataset>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDatasetSelectorList */
+export type LuzmoDatasetSelectorListElement = LuzmoDatasetSelectorListClass;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowClass, Agent, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-row';
+
+const LuzmoDatasetSelectorRowComponent = createComponent({
+  tagName: 'luzmo-dataset-selector-row',
+  elementClass: LuzmoDatasetSelectorRowClass,
+  react: React,
+  events: {
+    onLuzmoAgentSelected: 'luzmo-agent-selected' as EventName<CustomEvent<Agent>>,
+    onDatasetSelected: 'dataset-selected' as EventName<CustomEvent<Dataset>>,
+    onDatasetRemoved: 'dataset-removed' as EventName<CustomEvent<Dataset>>,
+    onLuzmoAgentRemoved: 'luzmo-agent-removed' as EventName<CustomEvent<Agent>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-dataset-selector-row>
+ *
+ * @event onLuzmoAgentSelected - Fired when an agent is selected
+ * @event onDatasetSelected - Fired when a dataset is selected
+ * @event onDatasetRemoved - Fired when a dataset is removed
+ * @event onLuzmoAgentRemoved - Fired when the selected agent is removed
+ */
+export const LuzmoDatasetSelectorRow = LuzmoDatasetSelectorRowComponent as ReactWebComponent<
+  LuzmoDatasetSelectorRowClass,
+  {
+    onLuzmoAgentSelected: EventName<CustomEvent<Agent>>;
+    onDatasetSelected: EventName<CustomEvent<Dataset>>;
+    onDatasetRemoved: EventName<CustomEvent<Dataset>>;
+    onLuzmoAgentRemoved: EventName<CustomEvent<Agent>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDatasetSelectorRow */
+export type LuzmoDatasetSelectorRowElement = LuzmoDatasetSelectorRowClass;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+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<DisplaySettingsSlotContentChangedEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-display-settings-binning>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export const LuzmoDisplaySettingsBinning = LuzmoDisplaySettingsBinningComponent as ReactWebComponent<
+  LuzmoDisplaySettingsBinningClass,
+  {
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDisplaySettingsBinning */
+export type LuzmoDisplaySettingsBinningElement = LuzmoDisplaySettingsBinningClass;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+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<DisplaySettingsSlotContentChangedEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-display-settings-datetime>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export const LuzmoDisplaySettingsDatetime = LuzmoDisplaySettingsDatetimeComponent as ReactWebComponent<
+  LuzmoDisplaySettingsDatetimeClass,
+  {
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDisplaySettingsDatetime */
+export type LuzmoDisplaySettingsDatetimeElement = LuzmoDisplaySettingsDatetimeClass;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+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<DisplaySettingsSlotContentChangedEventDetail>>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-display-settings-grand-totals>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export const LuzmoDisplaySettingsGrandTotals = LuzmoDisplaySettingsGrandTotalsComponent as ReactWebComponent<
+  LuzmoDisplaySettingsGrandTotalsClass,
+  {
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDisplaySettingsGrandTotals */
+export type LuzmoDisplaySettingsGrandTotalsElement = LuzmoDisplaySettingsGrandTotalsClass;