@luzmo/react-analytics-components-kit 1.0.5-beta.2

package/README.md

@@ -0,0 +1,63 @@
+# Luzmo Analytics Components Kit - React wrappers
+
+> Lightweight React wrappers using `@lit/react`
+
+This package provides React wrappers for the Luzmo Analytics Components Kit web components.
+Each wrapper is generated automatically using `@lit/react`'s `createComponent` helper,
+which provides proper React integration including event handling and TypeScript support.
+
+## Installation
+
+```bash
+npm install @luzmo/react-analytics-components-kit @luzmo/analytics-components-kit react @lit/react
+```
+
+## Requirements
+
+- React `^18.0.0 || ^19.0.0`.
+- `@lit/react` `^1.0.6`.
+- The peer package `@luzmo/analytics-components-kit` provides the underlying custom elements.
+
+## Usage
+
+```tsx
+import { LuzmoDataField } from '@luzmo/react-analytics-components-kit';
+
+function App() {
+  return (
+    <LuzmoDataField
+      data={
+        {
+          /* your data */
+        }
+      }
+      onDataItemDropped={(e) => console.log('Dropped:', e.detail)}
+    />
+  );
+}
+```
+
+## Event handling
+
+Events are automatically converted to React-style callback props:
+
+- `data-item-dropped` → `onDataItemDropped`
+- `filters-changed` → `onFiltersChanged`
+
+## TypeScript support
+
+```tsx
+import { LuzmoDataField, type LuzmoDataFieldElement } from '@luzmo/react-analytics-components-kit';
+import { useRef } from 'react';
+
+function App() {
+  const ref = useRef<LuzmoDataFieldElement>(null);
+
+  return <LuzmoDataField ref={ref} />;
+}
+```
+
+## Notes
+
+- This package depends on `@luzmo/analytics-components-kit` for the underlying custom elements.
+- Importing from `@luzmo/analytics-components-kit/react` is deprecated; migrate to this package.

package/esm/components/ai-chat.component.d.ts

@@ -0,0 +1,24 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoAiChat as LuzmoAiChatClass, AiChatCompleteEvent, AiChatConversationIdChangedEventDetail, AiChatDatasetsChangedEventDetail, AiChatMessageSentEventDetail, AiChatStepEvent, AssistantMessageActionEventDetail } from '@luzmo/analytics-components-kit/ai-chat';
+/**
+ * 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, 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) 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 declare const LuzmoAiChat: 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/esm/components/ai-chat.component.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoAiChat as LuzmoAiChatClass } from '@luzmo/analytics-components-kit/ai-chat';
+const LuzmoAiChatComponent = createComponent({
+    tagName: 'luzmo-ai-chat',
+    elementClass: LuzmoAiChatClass,
+    react: React,
+    events: {
+        onLuzmoMessageSent: 'luzmo-message-sent',
+        onLuzmoDatasetsChanged: 'luzmo-datasets-changed',
+        onLuzmoStep: 'luzmo-step',
+        onLuzmoComplete: 'luzmo-complete',
+        onLuzmoStop: 'luzmo-stop',
+        onLuzmoConversationIdChanged: 'luzmo-conversation-id-changed',
+        onLuzmoAssistantMessageAction: 'luzmo-assistant-message-action'
+    }
+});
+/**
+ * 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, 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) 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;

package/esm/components/ai-interaction-textarea.component.d.ts

@@ -0,0 +1,14 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoAiInteractionTextarea as LuzmoAiInteractionTextareaClass, PromptSubmittedEventDetail } from '@luzmo/analytics-components-kit/ai-interaction-textarea';
+/**
+ * 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 declare const LuzmoAiInteractionTextarea: ReactWebComponent<LuzmoAiInteractionTextareaClass, {
+    onPromptSubmitted: EventName<CustomEvent<PromptSubmittedEventDetail>>;
+    onPromptStopped: EventName<CustomEvent<void>>;
+}>;
+/** The underlying custom element type for LuzmoAiInteractionTextarea */
+export type LuzmoAiInteractionTextareaElement = LuzmoAiInteractionTextareaClass;

package/esm/components/ai-interaction-textarea.component.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoAiInteractionTextarea as LuzmoAiInteractionTextareaClass } from '@luzmo/analytics-components-kit/ai-interaction-textarea';
+const LuzmoAiInteractionTextareaComponent = createComponent({
+    tagName: 'luzmo-ai-interaction-textarea',
+    elementClass: LuzmoAiInteractionTextareaClass,
+    react: React,
+    events: {
+        onPromptSubmitted: 'prompt-submitted',
+        onPromptStopped: 'prompt-stopped'
+    }
+});
+/**
+ * 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;

package/esm/components/data-field-level.component.d.ts

@@ -0,0 +1,14 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDataFieldLevel as LuzmoDataFieldLevelClass, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail } from '@luzmo/analytics-components-kit/data-field-level';
+/**
+ * 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 declare const LuzmoDataFieldLevel: ReactWebComponent<LuzmoDataFieldLevelClass, {
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoDataFieldLevel */
+export type LuzmoDataFieldLevelElement = LuzmoDataFieldLevelClass;

package/esm/components/data-field-level.component.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDataFieldLevel as LuzmoDataFieldLevelClass } 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',
+        onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started'
+    }
+});
+/**
+ * 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;

package/esm/components/data-field-panel.component.d.ts

@@ -0,0 +1,21 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDataFieldPanel as LuzmoDataFieldPanelClass, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail, DatasetChangedEventDetail } from '@luzmo/analytics-components-kit/data-field-panel';
+/**
+ * A panel component that displays a list of data fields from a dataset.
+ * Optionally includes a dataset picker dropdown to switch between datasets.
+ *
+ * Data can be provided in two ways:
+ * 1. `datasetsDataFields` - Direct data, takes preference when provided
+ * 2. `datasetIds` + auth props - Fetches data automatically using the Luzmo API
+ *
+ * @event onLuzmoDatasetChanged - Announces that the selected dataset has changed
+ * @event onLuzmoDataFieldDropped - Announces that a data field has been dropped
+ * @event onLuzmoDataFieldDragStarted - Announces that a drag has started on a data field
+ */
+export declare const LuzmoDataFieldPanel: ReactWebComponent<LuzmoDataFieldPanelClass, {
+    onLuzmoDatasetChanged: EventName<CustomEvent<DatasetChangedEventDetail>>;
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoDataFieldPanel */
+export type LuzmoDataFieldPanelElement = LuzmoDataFieldPanelClass;

package/esm/components/data-field-panel.component.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDataFieldPanel as LuzmoDataFieldPanelClass } 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',
+        onLuzmoDataFieldDropped: 'luzmo-data-field-dropped',
+        onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started'
+    }
+});
+/**
+ * A panel component that displays a list of data fields from a dataset.
+ * Optionally includes a dataset picker dropdown to switch between datasets.
+ *
+ * Data can be provided in two ways:
+ * 1. `datasetsDataFields` - Direct data, takes preference when provided
+ * 2. `datasetIds` + auth props - Fetches data automatically using the Luzmo API
+ *
+ * @event onLuzmoDatasetChanged - Announces that the selected dataset has changed
+ * @event onLuzmoDataFieldDropped - Announces that a data field has been dropped
+ * @event onLuzmoDataFieldDragStarted - Announces that a drag has started on a data field
+ */
+export const LuzmoDataFieldPanel = LuzmoDataFieldPanelComponent;

package/esm/components/data-field.component.d.ts

@@ -0,0 +1,14 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDataField as LuzmoDataFieldClass, DataFieldDragStartedEventDetail, DataFieldDroppedEventDetail } from '@luzmo/analytics-components-kit/data-field';
+/**
+ * React wrapper for <luzmo-data-field>
+ *
+ * @event onLuzmoDataFieldDropped - Announces that the data field has been dropped
+ * @event onLuzmoDataFieldDragStarted - Announces that the drag is started on the data field
+ */
+export declare const LuzmoDataField: ReactWebComponent<LuzmoDataFieldClass, {
+    onLuzmoDataFieldDropped: EventName<CustomEvent<DataFieldDroppedEventDetail>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<DataFieldDragStartedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoDataField */
+export type LuzmoDataFieldElement = LuzmoDataFieldClass;

package/esm/components/data-field.component.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDataField as LuzmoDataFieldClass } from '@luzmo/analytics-components-kit/data-field';
+const LuzmoDataFieldComponent = createComponent({
+    tagName: 'luzmo-data-field',
+    elementClass: LuzmoDataFieldClass,
+    react: React,
+    events: {
+        onLuzmoDataFieldDropped: 'luzmo-data-field-dropped',
+        onLuzmoDataFieldDragStarted: 'luzmo-data-field-drag-started'
+    }
+});
+/**
+ * React wrapper for <luzmo-data-field>
+ *
+ * @event onLuzmoDataFieldDropped - Announces that the data field has been dropped
+ * @event onLuzmoDataFieldDragStarted - Announces that the drag is started on the data field
+ */
+export const LuzmoDataField = LuzmoDataFieldComponent;

package/esm/components/data-fields-select.component.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDataFieldsSelect as LuzmoDataFieldsSelectClass, DataFieldsSelectedEventDetail } from '@luzmo/analytics-components-kit/data-fields-select';
+/**
+ * React wrapper for <luzmo-data-fields-select>
+ *
+ * @event onLuzmoDataFieldsSelected - Emitted when data fields are selected
+ */
+export declare const LuzmoDataFieldsSelect: ReactWebComponent<LuzmoDataFieldsSelectClass, {
+    onLuzmoDataFieldsSelected: EventName<CustomEvent<DataFieldsSelectedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoDataFieldsSelect */
+export type LuzmoDataFieldsSelectElement = LuzmoDataFieldsSelectClass;

package/esm/components/data-fields-select.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDataFieldsSelect as LuzmoDataFieldsSelectClass } 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'
+    }
+});
+/**
+ * React wrapper for <luzmo-data-fields-select>
+ *
+ * @event onLuzmoDataFieldsSelected - Emitted when data fields are selected
+ */
+export const LuzmoDataFieldsSelect = LuzmoDataFieldsSelectComponent;

package/esm/components/dataset-icon.component.d.ts

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

package/esm/components/dataset-icon.component.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } 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;

package/esm/components/dataset-selector-list.component.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDatasetSelectorList as LuzmoDatasetSelectorListClass, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-list';
+/**
+ * React wrapper for <luzmo-dataset-selector-list>
+ *
+ * @event onDatasetSelected - Fired when a dataset is selected
+ */
+export declare const LuzmoDatasetSelectorList: ReactWebComponent<LuzmoDatasetSelectorListClass, {
+    onDatasetSelected: EventName<CustomEvent<Dataset>>;
+}>;
+/** The underlying custom element type for LuzmoDatasetSelectorList */
+export type LuzmoDatasetSelectorListElement = LuzmoDatasetSelectorListClass;

package/esm/components/dataset-selector-list.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDatasetSelectorList as LuzmoDatasetSelectorListClass } from '@luzmo/analytics-components-kit/dataset-selector-list';
+const LuzmoDatasetSelectorListComponent = createComponent({
+    tagName: 'luzmo-dataset-selector-list',
+    elementClass: LuzmoDatasetSelectorListClass,
+    react: React,
+    events: {
+        onDatasetSelected: 'dataset-selected'
+    }
+});
+/**
+ * React wrapper for <luzmo-dataset-selector-list>
+ *
+ * @event onDatasetSelected - Fired when a dataset is selected
+ */
+export const LuzmoDatasetSelectorList = LuzmoDatasetSelectorListComponent;

package/esm/components/dataset-selector-row.component.d.ts

@@ -0,0 +1,14 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowClass, Dataset } from '@luzmo/analytics-components-kit/dataset-selector-row';
+/**
+ * React wrapper for <luzmo-dataset-selector-row>
+ *
+ * @event onDatasetSelected - Fired when a dataset is selected
+ * @event onDatasetRemoved - Fired when a dataset is removed
+ */
+export declare const LuzmoDatasetSelectorRow: ReactWebComponent<LuzmoDatasetSelectorRowClass, {
+    onDatasetSelected: EventName<CustomEvent<Dataset>>;
+    onDatasetRemoved: EventName<CustomEvent<Dataset>>;
+}>;
+/** The underlying custom element type for LuzmoDatasetSelectorRow */
+export type LuzmoDatasetSelectorRowElement = LuzmoDatasetSelectorRowClass;

package/esm/components/dataset-selector-row.component.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDatasetSelectorRow as LuzmoDatasetSelectorRowClass } from '@luzmo/analytics-components-kit/dataset-selector-row';
+const LuzmoDatasetSelectorRowComponent = createComponent({
+    tagName: 'luzmo-dataset-selector-row',
+    elementClass: LuzmoDatasetSelectorRowClass,
+    react: React,
+    events: {
+        onDatasetSelected: 'dataset-selected',
+        onDatasetRemoved: 'dataset-removed'
+    }
+});
+/**
+ * React wrapper for <luzmo-dataset-selector-row>
+ *
+ * @event onDatasetSelected - Fired when a dataset is selected
+ * @event onDatasetRemoved - Fired when a dataset is removed
+ */
+export const LuzmoDatasetSelectorRow = LuzmoDatasetSelectorRowComponent;

package/esm/components/display-settings-binning.component.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDisplaySettingsBinning as LuzmoDisplaySettingsBinningClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-binning';
+/**
+ * React wrapper for <luzmo-display-settings-binning>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export declare const LuzmoDisplaySettingsBinning: ReactWebComponent<LuzmoDisplaySettingsBinningClass, {
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoDisplaySettingsBinning */
+export type LuzmoDisplaySettingsBinningElement = LuzmoDisplaySettingsBinningClass;

package/esm/components/display-settings-binning.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDisplaySettingsBinning as LuzmoDisplaySettingsBinningClass } 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'
+    }
+});
+/**
+ * React wrapper for <luzmo-display-settings-binning>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export const LuzmoDisplaySettingsBinning = LuzmoDisplaySettingsBinningComponent;

package/esm/components/display-settings-datetime.component.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDisplaySettingsDatetime as LuzmoDisplaySettingsDatetimeClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-datetime';
+/**
+ * React wrapper for <luzmo-display-settings-datetime>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export declare const LuzmoDisplaySettingsDatetime: ReactWebComponent<LuzmoDisplaySettingsDatetimeClass, {
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoDisplaySettingsDatetime */
+export type LuzmoDisplaySettingsDatetimeElement = LuzmoDisplaySettingsDatetimeClass;

package/esm/components/display-settings-datetime.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDisplaySettingsDatetime as LuzmoDisplaySettingsDatetimeClass } 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'
+    }
+});
+/**
+ * React wrapper for <luzmo-display-settings-datetime>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export const LuzmoDisplaySettingsDatetime = LuzmoDisplaySettingsDatetimeComponent;

package/esm/components/display-settings-grand-totals.component.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDisplaySettingsGrandTotals as LuzmoDisplaySettingsGrandTotalsClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-grand-totals';
+/**
+ * React wrapper for <luzmo-display-settings-grand-totals>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export declare const LuzmoDisplaySettingsGrandTotals: ReactWebComponent<LuzmoDisplaySettingsGrandTotalsClass, {
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoDisplaySettingsGrandTotals */
+export type LuzmoDisplaySettingsGrandTotalsElement = LuzmoDisplaySettingsGrandTotalsClass;

package/esm/components/display-settings-grand-totals.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDisplaySettingsGrandTotals as LuzmoDisplaySettingsGrandTotalsClass } 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'
+    }
+});
+/**
+ * React wrapper for <luzmo-display-settings-grand-totals>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export const LuzmoDisplaySettingsGrandTotals = LuzmoDisplaySettingsGrandTotalsComponent;

package/esm/components/display-settings-numeric.component.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDisplaySettingsNumeric as LuzmoDisplaySettingsNumericClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-numeric';
+/**
+ * React wrapper for <luzmo-display-settings-numeric>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export declare const LuzmoDisplaySettingsNumeric: ReactWebComponent<LuzmoDisplaySettingsNumericClass, {
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoDisplaySettingsNumeric */
+export type LuzmoDisplaySettingsNumericElement = LuzmoDisplaySettingsNumericClass;

package/esm/components/display-settings-numeric.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDisplaySettingsNumeric as LuzmoDisplaySettingsNumericClass } 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'
+    }
+});
+/**
+ * React wrapper for <luzmo-display-settings-numeric>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export const LuzmoDisplaySettingsNumeric = LuzmoDisplaySettingsNumericComponent;

package/esm/components/display-settings-period-over-period.component.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDisplaySettingsPeriodOverPeriod as LuzmoDisplaySettingsPeriodOverPeriodClass, DisplaySettingsSlotContentChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings-period-over-period';
+/**
+ * React wrapper for <luzmo-display-settings-period-over-period>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export declare const LuzmoDisplaySettingsPeriodOverPeriod: ReactWebComponent<LuzmoDisplaySettingsPeriodOverPeriodClass, {
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoDisplaySettingsPeriodOverPeriod */
+export type LuzmoDisplaySettingsPeriodOverPeriodElement = LuzmoDisplaySettingsPeriodOverPeriodClass;

package/esm/components/display-settings-period-over-period.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDisplaySettingsPeriodOverPeriod as LuzmoDisplaySettingsPeriodOverPeriodClass } 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'
+    }
+});
+/**
+ * React wrapper for <luzmo-display-settings-period-over-period>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ */
+export const LuzmoDisplaySettingsPeriodOverPeriod = LuzmoDisplaySettingsPeriodOverPeriodComponent;

package/esm/components/display-settings.component.d.ts

@@ -0,0 +1,16 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoDisplaySettings as LuzmoDisplaySettingsClass, DisplaySettingsRemoveSlotContentEventDetail, DisplaySettingsSlotContentChangedEventDetail, InfoVisibilityChangedEventDetail } from '@luzmo/analytics-components-kit/display-settings';
+/**
+ * React wrapper for <luzmo-display-settings>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ * @event onLuzmoRemoveSlotContent - Event that is fired when the remove button is clicked
+ * @event onLuzmoInfoVisibilityChanged - Event that is fired when the info button is clicked, includes the visibility state and ID values
+ */
+export declare const LuzmoDisplaySettings: ReactWebComponent<LuzmoDisplaySettingsClass, {
+    onLuzmoSlotContentChanged: EventName<CustomEvent<DisplaySettingsSlotContentChangedEventDetail>>;
+    onLuzmoRemoveSlotContent: EventName<CustomEvent<DisplaySettingsRemoveSlotContentEventDetail>>;
+    onLuzmoInfoVisibilityChanged: EventName<CustomEvent<InfoVisibilityChangedEventDetail>>;
+}>;
+/** The underlying custom element type for LuzmoDisplaySettings */
+export type LuzmoDisplaySettingsElement = LuzmoDisplaySettingsClass;

package/esm/components/display-settings.component.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoDisplaySettings as LuzmoDisplaySettingsClass } from '@luzmo/analytics-components-kit/display-settings';
+const LuzmoDisplaySettingsComponent = createComponent({
+    tagName: 'luzmo-display-settings',
+    elementClass: LuzmoDisplaySettingsClass,
+    react: React,
+    events: {
+        onLuzmoSlotContentChanged: 'luzmo-slot-content-changed',
+        onLuzmoRemoveSlotContent: 'luzmo-remove-slot-content',
+        onLuzmoInfoVisibilityChanged: 'luzmo-info-visibility-changed'
+    }
+});
+/**
+ * React wrapper for <luzmo-display-settings>
+ *
+ * @event onLuzmoSlotContentChanged - Event that is fired when the slot content is changed
+ * @event onLuzmoRemoveSlotContent - Event that is fired when the remove button is clicked
+ * @event onLuzmoInfoVisibilityChanged - Event that is fired when the info button is clicked, includes the visibility state and ID values
+ */
+export const LuzmoDisplaySettings = LuzmoDisplaySettingsComponent;

package/esm/components/filter-expression-picker.component.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoFilterExpressionPicker as LuzmoFilterExpressionPickerClass } from '@luzmo/analytics-components-kit/filter-expression-picker';
+/**
+ * React wrapper for <luzmo-filter-expression-picker>
+ *
+ * @event onLuzmoExpressionSelected - Fired when the user selects a filter expression (operator); `detail.expression` holds the chosen expression.
+ */
+export declare const LuzmoFilterExpressionPicker: ReactWebComponent<LuzmoFilterExpressionPickerClass, {
+    onLuzmoExpressionSelected: EventName<CustomEvent>;
+}>;
+/** The underlying custom element type for LuzmoFilterExpressionPicker */
+export type LuzmoFilterExpressionPickerElement = LuzmoFilterExpressionPickerClass;

package/esm/components/filter-expression-picker.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoFilterExpressionPicker as LuzmoFilterExpressionPickerClass } from '@luzmo/analytics-components-kit/filter-expression-picker';
+const LuzmoFilterExpressionPickerComponent = createComponent({
+    tagName: 'luzmo-filter-expression-picker',
+    elementClass: LuzmoFilterExpressionPickerClass,
+    react: React,
+    events: {
+        onLuzmoExpressionSelected: 'luzmo-expression-selected'
+    }
+});
+/**
+ * React wrapper for <luzmo-filter-expression-picker>
+ *
+ * @event onLuzmoExpressionSelected - Fired when the user selects a filter expression (operator); `detail.expression` holds the chosen expression.
+ */
+export const LuzmoFilterExpressionPicker = LuzmoFilterExpressionPickerComponent;