@luzmo/analytics-components-kit 1.0.1-alpha.147 → 1.0.1-alpha.148

package/index.d.ts

@@ -9,26 +9,26 @@ 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/draggable-data-field';
-export * from './components/draggable-data-field-level';
-export * from './components/draggable-data-fields-panel';
-export * from './components/droppable-slot';
-export * from './components/edit-item';
-export * from './components/edit-filters';
-export * from './components/edit-option';
-export * from './components/edit-option-action-button-group';
-export * from './components/edit-option-color-palette-picker';
-export * from './components/edit-option-color-picker';
-export * from './components/edit-option-color-range';
-export * from './components/edit-option-multi-language-field';
-export * from './components/edit-option-number-field';
-export * from './components/edit-option-picker';
-export * from './components/edit-option-position-picker';
-export * from './components/edit-option-positions-number-field';
-export * from './components/edit-option-radio-button-group';
-export * from './components/edit-option-slider';
-export * from './components/edit-option-switch';
-export * from './components/edit-option-text-field';
+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/item-option';
+export * from './components/item-option-action-button-group';
+export * from './components/item-option-color-palette-picker';
+export * from './components/item-option-color-picker';
+export * from './components/item-option-color-range';
+export * from './components/item-option-multi-language-field';
+export * from './components/item-option-number-field';
+export * from './components/item-option-picker';
+export * from './components/item-option-position-picker';
+export * from './components/item-option-positions-number-field';
+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';
@@ -36,10 +36,10 @@ 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/grid';
-export * from './components/item-data-drop-panel';
-export * from './components/item-data-picker-panel';
-export * from './components/slot-contents-picker';
+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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/analytics-components-kit",
-  "version": "1.0.1-alpha.147",
+  "version": "1.0.1-alpha.148",
   "type": "module",
   "main": "./components/index.js",
   "module": "./components/index.js",
@@ -21,6 +21,21 @@
       "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",
@@ -71,106 +86,6 @@
       "import": "./components/display-settings-period-over-period/index.js",
       "require": "./components/display-settings-period-over-period/index.cjs"
     },
-    "./draggable-data-field": {
-      "types": "./components/draggable-data-field/index.d.ts",
-      "import": "./components/draggable-data-field/index.js",
-      "require": "./components/draggable-data-field/index.cjs"
-    },
-    "./draggable-data-field-level": {
-      "types": "./components/draggable-data-field-level/index.d.ts",
-      "import": "./components/draggable-data-field-level/index.js",
-      "require": "./components/draggable-data-field-level/index.cjs"
-    },
-    "./draggable-data-fields-panel": {
-      "types": "./components/draggable-data-fields-panel/index.d.ts",
-      "import": "./components/draggable-data-fields-panel/index.js",
-      "require": "./components/draggable-data-fields-panel/index.cjs"
-    },
-    "./droppable-slot": {
-      "types": "./components/droppable-slot/index.d.ts",
-      "import": "./components/droppable-slot/index.js",
-      "require": "./components/droppable-slot/index.cjs"
-    },
-    "./edit-filters": {
-      "types": "./components/edit-filters/index.d.ts",
-      "import": "./components/edit-filters/index.js",
-      "require": "./components/edit-filters/index.cjs"
-    },
-    "./edit-item": {
-      "types": "./components/edit-item/index.d.ts",
-      "import": "./components/edit-item/index.js",
-      "require": "./components/edit-item/index.cjs"
-    },
-    "./edit-option": {
-      "types": "./components/edit-option/index.d.ts",
-      "import": "./components/edit-option/index.js",
-      "require": "./components/edit-option/index.cjs"
-    },
-    "./edit-option-action-button-group": {
-      "types": "./components/edit-option-action-button-group/index.d.ts",
-      "import": "./components/edit-option-action-button-group/index.js",
-      "require": "./components/edit-option-action-button-group/index.cjs"
-    },
-    "./edit-option-color-palette-picker": {
-      "types": "./components/edit-option-color-palette-picker/index.d.ts",
-      "import": "./components/edit-option-color-palette-picker/index.js",
-      "require": "./components/edit-option-color-palette-picker/index.cjs"
-    },
-    "./edit-option-color-picker": {
-      "types": "./components/edit-option-color-picker/index.d.ts",
-      "import": "./components/edit-option-color-picker/index.js",
-      "require": "./components/edit-option-color-picker/index.cjs"
-    },
-    "./edit-option-color-range": {
-      "types": "./components/edit-option-color-range/index.d.ts",
-      "import": "./components/edit-option-color-range/index.js",
-      "require": "./components/edit-option-color-range/index.cjs"
-    },
-    "./edit-option-multi-language-field": {
-      "types": "./components/edit-option-multi-language-field/index.d.ts",
-      "import": "./components/edit-option-multi-language-field/index.js",
-      "require": "./components/edit-option-multi-language-field/index.cjs"
-    },
-    "./edit-option-number-field": {
-      "types": "./components/edit-option-number-field/index.d.ts",
-      "import": "./components/edit-option-number-field/index.js",
-      "require": "./components/edit-option-number-field/index.cjs"
-    },
-    "./edit-option-picker": {
-      "types": "./components/edit-option-picker/index.d.ts",
-      "import": "./components/edit-option-picker/index.js",
-      "require": "./components/edit-option-picker/index.cjs"
-    },
-    "./edit-option-position-picker": {
-      "types": "./components/edit-option-position-picker/index.d.ts",
-      "import": "./components/edit-option-position-picker/index.js",
-      "require": "./components/edit-option-position-picker/index.cjs"
-    },
-    "./edit-option-positions-number-field": {
-      "types": "./components/edit-option-positions-number-field/index.d.ts",
-      "import": "./components/edit-option-positions-number-field/index.js",
-      "require": "./components/edit-option-positions-number-field/index.cjs"
-    },
-    "./edit-option-radio-button-group": {
-      "types": "./components/edit-option-radio-button-group/index.d.ts",
-      "import": "./components/edit-option-radio-button-group/index.js",
-      "require": "./components/edit-option-radio-button-group/index.cjs"
-    },
-    "./edit-option-slider": {
-      "types": "./components/edit-option-slider/index.d.ts",
-      "import": "./components/edit-option-slider/index.js",
-      "require": "./components/edit-option-slider/index.cjs"
-    },
-    "./edit-option-switch": {
-      "types": "./components/edit-option-switch/index.d.ts",
-      "import": "./components/edit-option-switch/index.js",
-      "require": "./components/edit-option-switch/index.cjs"
-    },
-    "./edit-option-text-field": {
-      "types": "./components/edit-option-text-field/index.d.ts",
-      "import": "./components/edit-option-text-field/index.js",
-      "require": "./components/edit-option-text-field/index.cjs"
-    },
     "./filter-expression-picker": {
       "types": "./components/filter-expression-picker/index.d.ts",
       "import": "./components/filter-expression-picker/index.js",
@@ -206,25 +121,110 @@
       "import": "./components/filter-value-picker-numeric/index.js",
       "require": "./components/filter-value-picker-numeric/index.cjs"
     },
-    "./grid": {
-      "types": "./components/grid/index.d.ts",
-      "import": "./components/grid/index.js",
-      "require": "./components/grid/index.cjs"
-    },
-    "./item-data-drop-panel": {
-      "types": "./components/item-data-drop-panel/index.d.ts",
-      "import": "./components/item-data-drop-panel/index.js",
-      "require": "./components/item-data-drop-panel/index.cjs"
-    },
-    "./item-data-picker-panel": {
-      "types": "./components/item-data-picker-panel/index.d.ts",
-      "import": "./components/item-data-picker-panel/index.js",
-      "require": "./components/item-data-picker-panel/index.cjs"
-    },
-    "./slot-contents-picker": {
-      "types": "./components/slot-contents-picker/index.d.ts",
-      "import": "./components/slot-contents-picker/index.js",
-      "require": "./components/slot-contents-picker/index.cjs"
+    "./filters": {
+      "types": "./components/filters/index.d.ts",
+      "import": "./components/filters/index.js",
+      "require": "./components/filters/index.cjs"
+    },
+    "./item-grid": {
+      "types": "./components/item-grid/index.d.ts",
+      "import": "./components/item-grid/index.js",
+      "require": "./components/item-grid/index.cjs"
+    },
+    "./item-option": {
+      "types": "./components/item-option/index.d.ts",
+      "import": "./components/item-option/index.js",
+      "require": "./components/item-option/index.cjs"
+    },
+    "./item-option-action-button-group": {
+      "types": "./components/item-option-action-button-group/index.d.ts",
+      "import": "./components/item-option-action-button-group/index.js",
+      "require": "./components/item-option-action-button-group/index.cjs"
+    },
+    "./item-option-color-palette-picker": {
+      "types": "./components/item-option-color-palette-picker/index.d.ts",
+      "import": "./components/item-option-color-palette-picker/index.js",
+      "require": "./components/item-option-color-palette-picker/index.cjs"
+    },
+    "./item-option-color-picker": {
+      "types": "./components/item-option-color-picker/index.d.ts",
+      "import": "./components/item-option-color-picker/index.js",
+      "require": "./components/item-option-color-picker/index.cjs"
+    },
+    "./item-option-color-range": {
+      "types": "./components/item-option-color-range/index.d.ts",
+      "import": "./components/item-option-color-range/index.js",
+      "require": "./components/item-option-color-range/index.cjs"
+    },
+    "./item-option-multi-language-field": {
+      "types": "./components/item-option-multi-language-field/index.d.ts",
+      "import": "./components/item-option-multi-language-field/index.js",
+      "require": "./components/item-option-multi-language-field/index.cjs"
+    },
+    "./item-option-number-field": {
+      "types": "./components/item-option-number-field/index.d.ts",
+      "import": "./components/item-option-number-field/index.js",
+      "require": "./components/item-option-number-field/index.cjs"
+    },
+    "./item-option-panel": {
+      "types": "./components/item-option-panel/index.d.ts",
+      "import": "./components/item-option-panel/index.js",
+      "require": "./components/item-option-panel/index.cjs"
+    },
+    "./item-option-picker": {
+      "types": "./components/item-option-picker/index.d.ts",
+      "import": "./components/item-option-picker/index.js",
+      "require": "./components/item-option-picker/index.cjs"
+    },
+    "./item-option-position-picker": {
+      "types": "./components/item-option-position-picker/index.d.ts",
+      "import": "./components/item-option-position-picker/index.js",
+      "require": "./components/item-option-position-picker/index.cjs"
+    },
+    "./item-option-positions-number-field": {
+      "types": "./components/item-option-positions-number-field/index.d.ts",
+      "import": "./components/item-option-positions-number-field/index.js",
+      "require": "./components/item-option-positions-number-field/index.cjs"
+    },
+    "./item-option-radio-button-group": {
+      "types": "./components/item-option-radio-button-group/index.d.ts",
+      "import": "./components/item-option-radio-button-group/index.js",
+      "require": "./components/item-option-radio-button-group/index.cjs"
+    },
+    "./item-option-slider": {
+      "types": "./components/item-option-slider/index.d.ts",
+      "import": "./components/item-option-slider/index.js",
+      "require": "./components/item-option-slider/index.cjs"
+    },
+    "./item-option-switch": {
+      "types": "./components/item-option-switch/index.d.ts",
+      "import": "./components/item-option-switch/index.js",
+      "require": "./components/item-option-switch/index.cjs"
+    },
+    "./item-option-text-field": {
+      "types": "./components/item-option-text-field/index.d.ts",
+      "import": "./components/item-option-text-field/index.js",
+      "require": "./components/item-option-text-field/index.cjs"
+    },
+    "./item-slot-drop": {
+      "types": "./components/item-slot-drop/index.d.ts",
+      "import": "./components/item-slot-drop/index.js",
+      "require": "./components/item-slot-drop/index.cjs"
+    },
+    "./item-slot-drop-panel": {
+      "types": "./components/item-slot-drop-panel/index.d.ts",
+      "import": "./components/item-slot-drop-panel/index.js",
+      "require": "./components/item-slot-drop-panel/index.cjs"
+    },
+    "./item-slot-picker": {
+      "types": "./components/item-slot-picker/index.d.ts",
+      "import": "./components/item-slot-picker/index.js",
+      "require": "./components/item-slot-picker/index.cjs"
+    },
+    "./item-slot-picker-panel": {
+      "types": "./components/item-slot-picker-panel/index.d.ts",
+      "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",

package/react/README.md

@@ -30,6 +30,8 @@ function App() {
 ## Available Components
 
 - `LuzmoAiInteractionTextarea` → `<luzmo-ai-interaction-textarea>`
+- `LuzmoDataFieldLevel` → `<luzmo-data-field-level>`
+- `LuzmoDataFieldPanel` → `<luzmo-data-field-panel>`
 - `LuzmoDatasetIcon` → `<luzmo-dataset-icon>`
 - `LuzmoDatasetSelectorList` → `<luzmo-dataset-selector-list>`
 - `LuzmoDatasetSelectorRow` → `<luzmo-dataset-selector-row>`
@@ -39,24 +41,6 @@ function App() {
 - `LuzmoDisplaySettingsGrandTotals` → `<luzmo-display-settings-grand-totals>`
 - `LuzmoDisplaySettingsNumeric` → `<luzmo-display-settings-numeric>`
 - `LuzmoDisplaySettingsPeriodOverPeriod` → `<luzmo-display-settings-period-over-period>`
-- `LuzmoDraggableDataFieldsPanel` → `<luzmo-draggable-data-fields-panel>`
-- `LuzmoDroppableSlot` → `<luzmo-droppable-slot>`
-- `LuzmoEditFilters` → `<luzmo-edit-filters>`
-- `LuzmoEditItem` → `<luzmo-edit-item>`
-- `LuzmoEditOption` → `<luzmo-edit-option>`
-- `LuzmoEditOptionActionButtonGroup` → `<luzmo-edit-option-action-button-group>`
-- `LuzmoEditOptionColorPalettePicker` → `<luzmo-edit-option-color-palette-picker>`
-- `LuzmoEditOptionColorPicker` → `<luzmo-edit-option-color-picker>`
-- `LuzmoEditOptionColorRange` → `<luzmo-edit-option-color-range>`
-- `LuzmoEditOptionMultiLanguageField` → `<luzmo-edit-option-multi-language-field>`
-- `LuzmoEditOptionNumberField` → `<luzmo-edit-option-number-field>`
-- `LuzmoEditOptionPicker` → `<luzmo-edit-option-picker>`
-- `LuzmoEditOptionPositionPicker` → `<luzmo-edit-option-position-picker>`
-- `LuzmoEditOptionPositionsNumberField` → `<luzmo-edit-option-positions-number-field>`
-- `LuzmoEditOptionRadioButtonGroup` → `<luzmo-edit-option-radio-button-group>`
-- `LuzmoEditOptionSlider` → `<luzmo-edit-option-slider>`
-- `LuzmoEditOptionSwitch` → `<luzmo-edit-option-switch>`
-- `LuzmoEditOptionTextField` → `<luzmo-edit-option-text-field>`
 - `LuzmoFilterExpressionPicker` → `<luzmo-filter-expression-picker>`
 - `LuzmoFilterItem` → `<luzmo-filter-item>`
 - `LuzmoFilterParameterPicker` → `<luzmo-filter-parameter-picker>`
@@ -64,10 +48,27 @@ function App() {
 - `LuzmoFilterValuePickerDatetime` → `<luzmo-filter-value-picker-datetime>`
 - `LuzmoFilterValuePickerHierarchy` → `<luzmo-filter-value-picker-hierarchy>`
 - `LuzmoFilterValuePickerNumeric` → `<luzmo-filter-value-picker-numeric>`
-- `LuzmoGrid` → `<luzmo-grid>`
-- `LuzmoItemDataDropPanel` → `<luzmo-item-data-drop-panel>`
-- `LuzmoItemDataPickerPanel` → `<luzmo-item-data-picker-panel>`
-- `LuzmoSlotContentsPicker` → `<luzmo-slot-contents-picker>`
+- `LuzmoFilters` → `<luzmo-filters>`
+- `LuzmoItemGrid` → `<luzmo-item-grid>`
+- `LuzmoItemOption` → `<luzmo-item-option>`
+- `LuzmoItemOptionActionButtonGroup` → `<luzmo-item-option-action-button-group>`
+- `LuzmoItemOptionColorPalettePicker` → `<luzmo-item-option-color-palette-picker>`
+- `LuzmoItemOptionColorPicker` → `<luzmo-item-option-color-picker>`
+- `LuzmoItemOptionColorRange` → `<luzmo-item-option-color-range>`
+- `LuzmoItemOptionMultiLanguageField` → `<luzmo-item-option-multi-language-field>`
+- `LuzmoItemOptionNumberField` → `<luzmo-item-option-number-field>`
+- `LuzmoItemOptionPanel` → `<luzmo-item-option-panel>`
+- `LuzmoItemOptionPicker` → `<luzmo-item-option-picker>`
+- `LuzmoItemOptionPositionPicker` → `<luzmo-item-option-position-picker>`
+- `LuzmoItemOptionPositionsNumberField` → `<luzmo-item-option-positions-number-field>`
+- `LuzmoItemOptionRadioButtonGroup` → `<luzmo-item-option-radio-button-group>`
+- `LuzmoItemOptionSlider` → `<luzmo-item-option-slider>`
+- `LuzmoItemOptionSwitch` → `<luzmo-item-option-switch>`
+- `LuzmoItemOptionTextField` → `<luzmo-item-option-text-field>`
+- `LuzmoItemSlotDrop` → `<luzmo-item-slot-drop>`
+- `LuzmoItemSlotDropPanel` → `<luzmo-item-slot-drop-panel>`
+- `LuzmoItemSlotPicker` → `<luzmo-item-slot-picker>`
+- `LuzmoItemSlotPickerPanel` → `<luzmo-item-slot-picker-panel>`
 - `LuzmoSlotMenu` → `<luzmo-slot-menu>`
 - `LuzmoSlotMenuList` → `<luzmo-slot-menu-list>`
 - `LuzmoVizItemMenu` → `<luzmo-viz-item-menu>`

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, DatasetDataField } 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}>>
+  }
+});
+
+/**
+ * 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<{data: DatasetDataField}>>;
+    onLuzmoDataFieldDragStarted: EventName<CustomEvent<{data: DatasetDataField}>>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoDataFieldLevel */
+export type LuzmoDataFieldLevelElement = LuzmoDataFieldLevelClass;

package/react/components/{draggable-data-fields-panel.component.ts → data-field-panel.component.ts}

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent, EventName, ReactWebComponent } from '@lit/react';
-import { LuzmoDraggableDataFieldsPanel as LuzmoDraggableDataFieldsPanelClass } from '@luzmo/analytics-components-kit/draggable-data-fields-panel';
+import { LuzmoDataFieldPanel as LuzmoDataFieldPanelClass } from '@luzmo/analytics-components-kit/data-field-panel';
 
-const LuzmoDraggableDataFieldsPanelComponent = createComponent({
-  tagName: 'luzmo-draggable-data-fields-panel',
-  elementClass: LuzmoDraggableDataFieldsPanelClass,
+const LuzmoDataFieldPanelComponent = createComponent({
+  tagName: 'luzmo-data-field-panel',
+  elementClass: LuzmoDataFieldPanelClass,
   react: React,
   events: {
     onLuzmoDatasetChanged: 'luzmo-dataset-changed' as EventName<CustomEvent>,
@@ -14,7 +14,7 @@ const LuzmoDraggableDataFieldsPanelComponent = createComponent({
 });
 
 /**
- * A panel component that displays a list of draggable data fields from a dataset.
+ * 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:
@@ -22,11 +22,11 @@ const LuzmoDraggableDataFieldsPanelComponent = createComponent({
  * 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 draggable data field has been dropped
+ * @event onLuzmoDataFieldDropped - Announces that a data field has been dropped
  * @event onLuzmoDataFieldDragStarted - Announces that a drag has started on a data field
  */
-export const LuzmoDraggableDataFieldsPanel = LuzmoDraggableDataFieldsPanelComponent as ReactWebComponent<
-  LuzmoDraggableDataFieldsPanelClass,
+export const LuzmoDataFieldPanel = LuzmoDataFieldPanelComponent as ReactWebComponent<
+  LuzmoDataFieldPanelClass,
   {
     onLuzmoDatasetChanged: EventName<CustomEvent>;
     onLuzmoDataFieldDropped: EventName<CustomEvent>;
@@ -34,5 +34,5 @@ export const LuzmoDraggableDataFieldsPanel = LuzmoDraggableDataFieldsPanelCompon
   }
 >;
 
-/** The underlying custom element type for LuzmoDraggableDataFieldsPanel */
-export type LuzmoDraggableDataFieldsPanelElement = LuzmoDraggableDataFieldsPanelClass;
+/** The underlying custom element type for LuzmoDataFieldPanel */
+export type LuzmoDataFieldPanelElement = LuzmoDataFieldPanelClass;

package/react/components/filters.component.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoFilters as LuzmoFiltersClass } from '@luzmo/analytics-components-kit/filters';
+
+const LuzmoFiltersComponent = createComponent({
+  tagName: 'luzmo-filters',
+  elementClass: LuzmoFiltersClass,
+  react: React,
+  events: {
+    onLuzmoFiltersChanged: 'luzmo-filters-changed' as EventName<CustomEvent>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-filters>
+ *
+ * @event onLuzmoFiltersChanged - Announces that the filters have changed
+ */
+export const LuzmoFilters = LuzmoFiltersComponent as ReactWebComponent<
+  LuzmoFiltersClass,
+  {
+    onLuzmoFiltersChanged: EventName<CustomEvent>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoFilters */
+export type LuzmoFiltersElement = LuzmoFiltersClass;

package/react/components/{grid → item-grid}/types.ts

@@ -3,7 +3,7 @@ import type { IconDefinition } from '@luzmo/icons';
 import type { Placement } from '@luzmo/lucero';
 import type { TemplateResult } from 'lit';
 
-export type DefaultActionType = 'lock' | 'filters' | 'edit' | 'edit-data' | 'edit-options' | 'edit-filters' | 'delete' | 'clone';
+export type DefaultActionType = 'lock' | 'filters' | 'edit' | 'edit-data' | 'item-options' | 'delete' | 'clone';
 
 export interface Action {
   icon?: IconDefinition;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoItemGrid as LuzmoItemGridClass } 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>,
+    onLuzmoItemGridChanged: 'luzmo-item-grid-changed' as EventName<CustomEvent>,
+    onLuzmoItemGridReady: 'luzmo-item-grid-ready' as EventName<CustomEvent>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-item-grid>
+ *
+ * @event onLuzmoItemGridItemAction - Fired when an item action is performed
+ * @event onLuzmoItemGridChanged - Fired when the grid is changed
+ * @event onLuzmoItemGridReady - Fired when the grid is ready
+ */
+export const LuzmoItemGrid = LuzmoItemGridComponent as ReactWebComponent<
+  LuzmoItemGridClass,
+  {
+    onLuzmoItemGridItemAction: EventName<CustomEvent>;
+    onLuzmoItemGridChanged: EventName<CustomEvent>;
+    onLuzmoItemGridReady: EventName<CustomEvent>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoItemGrid */
+export type LuzmoItemGridElement = LuzmoItemGridClass;

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

@@ -0,0 +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';
+
+const LuzmoItemOptionActionButtonGroupComponent = createComponent({
+  tagName: 'luzmo-item-option-action-button-group',
+  elementClass: LuzmoItemOptionActionButtonGroupClass,
+  react: React,
+  events: {
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-item-option-action-button-group>
+ */
+export const LuzmoItemOptionActionButtonGroup = LuzmoItemOptionActionButtonGroupComponent as ReactWebComponent<
+  LuzmoItemOptionActionButtonGroupClass,
+  {
+    onLuzmoOptionChanged: EventName<CustomEvent>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoItemOptionActionButtonGroup */
+export type LuzmoItemOptionActionButtonGroupElement = LuzmoItemOptionActionButtonGroupClass;

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

@@ -0,0 +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';
+
+const LuzmoItemOptionColorPalettePickerComponent = createComponent({
+  tagName: 'luzmo-item-option-color-palette-picker',
+  elementClass: LuzmoItemOptionColorPalettePickerClass,
+  react: React,
+  events: {
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-item-option-color-palette-picker>
+ */
+export const LuzmoItemOptionColorPalettePicker = LuzmoItemOptionColorPalettePickerComponent as ReactWebComponent<
+  LuzmoItemOptionColorPalettePickerClass,
+  {
+    onLuzmoOptionChanged: EventName<CustomEvent>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoItemOptionColorPalettePicker */
+export type LuzmoItemOptionColorPalettePickerElement = LuzmoItemOptionColorPalettePickerClass;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { createComponent, EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoItemOptionColorPicker as LuzmoItemOptionColorPickerClass } from '@luzmo/analytics-components-kit/item-option-color-picker';
+
+const LuzmoItemOptionColorPickerComponent = createComponent({
+  tagName: 'luzmo-item-option-color-picker',
+  elementClass: LuzmoItemOptionColorPickerClass,
+  react: React,
+  events: {
+    onLuzmoOptionChanged: 'luzmo-option-changed' as EventName<CustomEvent>
+  }
+});
+
+/**
+ * React wrapper for <luzmo-item-option-color-picker>
+ *
+ * @event onLuzmoOptionChanged - Emitted when the color is changed.
+ */
+export const LuzmoItemOptionColorPicker = LuzmoItemOptionColorPickerComponent as ReactWebComponent<
+  LuzmoItemOptionColorPickerClass,
+  {
+    onLuzmoOptionChanged: EventName<CustomEvent>;
+  }
+>;
+
+/** The underlying custom element type for LuzmoItemOptionColorPicker */
+export type LuzmoItemOptionColorPickerElement = LuzmoItemOptionColorPickerClass;