@luzmo/react-lucero 1.0.3-alpha.14

package/README.md

@@ -0,0 +1,28 @@
+# Luzmo Lucero Design System - React Wrappers
+
+> Lightweight React wrappers using `@lit/react`
+
+This package provides React wrappers for the Luzmo Lucero Design System web components.
+
+## Installation
+
+```bash
+npm install @luzmo/react-lucero @luzmo/lucero react react-dom @lit/react
+```
+
+## Usage
+
+```tsx
+import { LuzmoButton } from '@luzmo/react-lucero';
+// or
+import { LuzmoButton } from '@luzmo/react-lucero/button';
+
+export function App() {
+  return <LuzmoButton variant="primary">Click me</LuzmoButton>;
+}
+```
+
+## Notes
+
+- This package depends on `@luzmo/lucero` for the underlying custom elements
+- Keep this file under `wrappers/react/package/` to customize published README content

package/esm/components/accordion.d.ts

@@ -0,0 +1,8 @@
+import { ReactWebComponent } from '@lit/react';
+import { LuzmoAccordion as LuzmoAccordionClass } from '@luzmo/lucero/accordion';
+/**
+ * React wrapper for <luzmo-accordion>
+ */
+export declare const LuzmoAccordion: ReactWebComponent<LuzmoAccordionClass>;
+/** The underlying custom element type for LuzmoAccordion */
+export type LuzmoAccordionElement = LuzmoAccordionClass;

package/esm/components/accordion.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoAccordion as LuzmoAccordionClass } from '@luzmo/lucero/accordion';
+const LuzmoAccordionComponent = createComponent({
+    tagName: 'luzmo-accordion',
+    elementClass: LuzmoAccordionClass,
+    react: React,
+    events: {}
+});
+/**
+ * React wrapper for <luzmo-accordion>
+ */
+export const LuzmoAccordion = LuzmoAccordionComponent;

package/esm/components/action-bar.d.ts

@@ -0,0 +1,10 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoActionBar as LuzmoActionBarClass } from '@luzmo/lucero/action-bar';
+/**
+ * React wrapper for <luzmo-action-bar>
+ */
+export declare const LuzmoActionBar: ReactWebComponent<LuzmoActionBarClass, {
+    onClose: EventName<Event>;
+}>;
+/** The underlying custom element type for LuzmoActionBar */
+export type LuzmoActionBarElement = LuzmoActionBarClass;

package/esm/components/action-bar.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoActionBar as LuzmoActionBarClass } from '@luzmo/lucero/action-bar';
+const LuzmoActionBarComponent = createComponent({
+    tagName: 'luzmo-action-bar',
+    elementClass: LuzmoActionBarClass,
+    react: React,
+    events: {
+        onClose: 'close'
+    }
+});
+/**
+ * React wrapper for <luzmo-action-bar>
+ */
+export const LuzmoActionBar = LuzmoActionBarComponent;

package/esm/components/action-button.d.ts

@@ -0,0 +1,16 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoActionButton as LuzmoActionButtonClass } from '@luzmo/lucero/action-button';
+/**
+ * React wrapper for <luzmo-action-button>
+ *
+ * @event onLongpress - Synthesizes a "longpress" interaction that signifies a `pointerdown` event that is >=300ms or a keyboard event where code is `Space` or code is `ArrowDown` while `altKey===true`.
+ * @event onChange - Announces a change in the `selected` property of an action button
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export declare const LuzmoActionButton: ReactWebComponent<LuzmoActionButtonClass, {
+    onLongpress: EventName<CustomEvent>;
+    onChange: EventName<CustomEvent>;
+    onKeydown: EventName<KeyboardEvent>;
+}>;
+/** The underlying custom element type for LuzmoActionButton */
+export type LuzmoActionButtonElement = LuzmoActionButtonClass;

package/esm/components/action-button.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoActionButton as LuzmoActionButtonClass } from '@luzmo/lucero/action-button';
+const LuzmoActionButtonComponent = createComponent({
+    tagName: 'luzmo-action-button',
+    elementClass: LuzmoActionButtonClass,
+    react: React,
+    events: {
+        onLongpress: 'longpress',
+        onChange: 'change',
+        onKeydown: 'keydown'
+    }
+});
+/**
+ * React wrapper for <luzmo-action-button>
+ *
+ * @event onLongpress - Synthesizes a "longpress" interaction that signifies a `pointerdown` event that is >=300ms or a keyboard event where code is `Space` or code is `ArrowDown` while `altKey===true`.
+ * @event onChange - Announces a change in the `selected` property of an action button
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export const LuzmoActionButton = LuzmoActionButtonComponent;

package/esm/components/action-group.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoActionGroup as LuzmoActionGroupClass } from '@luzmo/lucero/action-group';
+/**
+ * React wrapper for <luzmo-action-group>
+ *
+ * @event onChange - Announces that selection state has been changed by user
+ */
+export declare const LuzmoActionGroup: ReactWebComponent<LuzmoActionGroupClass, {
+    onChange: EventName<Event>;
+}>;
+/** The underlying custom element type for LuzmoActionGroup */
+export type LuzmoActionGroupElement = LuzmoActionGroupClass;

package/esm/components/action-group.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoActionGroup as LuzmoActionGroupClass } from '@luzmo/lucero/action-group';
+const LuzmoActionGroupComponent = createComponent({
+    tagName: 'luzmo-action-group',
+    elementClass: LuzmoActionGroupClass,
+    react: React,
+    events: {
+        onChange: 'change'
+    }
+});
+/**
+ * React wrapper for <luzmo-action-group>
+ *
+ * @event onChange - Announces that selection state has been changed by user
+ */
+export const LuzmoActionGroup = LuzmoActionGroupComponent;

package/esm/components/action-menu.d.ts

@@ -0,0 +1,14 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoActionMenu as LuzmoActionMenuClass } from '@luzmo/lucero/action-menu';
+/**
+ * React wrapper for <luzmo-action-menu>
+ *
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export declare const LuzmoActionMenu: ReactWebComponent<LuzmoActionMenuClass, {
+    onChange: EventName<CustomEvent>;
+    onScroll: EventName<Event>;
+    onKeydown: EventName<KeyboardEvent>;
+}>;
+/** The underlying custom element type for LuzmoActionMenu */
+export type LuzmoActionMenuElement = LuzmoActionMenuClass;

package/esm/components/action-menu.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoActionMenu as LuzmoActionMenuClass } from '@luzmo/lucero/action-menu';
+const LuzmoActionMenuComponent = createComponent({
+    tagName: 'luzmo-action-menu',
+    elementClass: LuzmoActionMenuClass,
+    react: React,
+    events: {
+        onChange: 'change',
+        onScroll: 'scroll',
+        onKeydown: 'keydown'
+    }
+});
+/**
+ * React wrapper for <luzmo-action-menu>
+ *
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export const LuzmoActionMenu = LuzmoActionMenuComponent;

package/esm/components/avatar.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoAvatar as LuzmoAvatarClass } from '@luzmo/lucero/avatar';
+/**
+ * React wrapper for <luzmo-avatar>
+ *
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export declare const LuzmoAvatar: ReactWebComponent<LuzmoAvatarClass, {
+    onKeydown: EventName<KeyboardEvent>;
+}>;
+/** The underlying custom element type for LuzmoAvatar */
+export type LuzmoAvatarElement = LuzmoAvatarClass;

package/esm/components/avatar.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoAvatar as LuzmoAvatarClass } from '@luzmo/lucero/avatar';
+const LuzmoAvatarComponent = createComponent({
+    tagName: 'luzmo-avatar',
+    elementClass: LuzmoAvatarClass,
+    react: React,
+    events: {
+        onKeydown: 'keydown'
+    }
+});
+/**
+ * React wrapper for <luzmo-avatar>
+ *
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export const LuzmoAvatar = LuzmoAvatarComponent;

package/esm/components/badge.d.ts

@@ -0,0 +1,8 @@
+import { ReactWebComponent } from '@lit/react';
+import { LuzmoBadge as LuzmoBadgeClass } from '@luzmo/lucero/badge';
+/**
+ * React wrapper for <luzmo-badge>
+ */
+export declare const LuzmoBadge: ReactWebComponent<LuzmoBadgeClass>;
+/** The underlying custom element type for LuzmoBadge */
+export type LuzmoBadgeElement = LuzmoBadgeClass;

package/esm/components/badge.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoBadge as LuzmoBadgeClass } from '@luzmo/lucero/badge';
+const LuzmoBadgeComponent = createComponent({
+    tagName: 'luzmo-badge',
+    elementClass: LuzmoBadgeClass,
+    react: React,
+    events: {}
+});
+/**
+ * React wrapper for <luzmo-badge>
+ */
+export const LuzmoBadge = LuzmoBadgeComponent;

package/esm/components/button-group.d.ts

@@ -0,0 +1,8 @@
+import { ReactWebComponent } from '@lit/react';
+import { LuzmoButtonGroup as LuzmoButtonGroupClass } from '@luzmo/lucero/button-group';
+/**
+ * React wrapper for <luzmo-button-group>
+ */
+export declare const LuzmoButtonGroup: ReactWebComponent<LuzmoButtonGroupClass>;
+/** The underlying custom element type for LuzmoButtonGroup */
+export type LuzmoButtonGroupElement = LuzmoButtonGroupClass;

package/esm/components/button-group.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoButtonGroup as LuzmoButtonGroupClass } from '@luzmo/lucero/button-group';
+const LuzmoButtonGroupComponent = createComponent({
+    tagName: 'luzmo-button-group',
+    elementClass: LuzmoButtonGroupClass,
+    react: React,
+    events: {}
+});
+/**
+ * React wrapper for <luzmo-button-group>
+ */
+export const LuzmoButtonGroup = LuzmoButtonGroupComponent;

package/esm/components/button.d.ts

@@ -0,0 +1,14 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoButton as LuzmoButtonClass } from '@luzmo/lucero/button';
+/**
+ * React wrapper for <luzmo-button>
+ *
+ * @event onChange - Announces that the `value` of the element has changed
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export declare const LuzmoButton: ReactWebComponent<LuzmoButtonClass, {
+    onChange: EventName<CustomEvent>;
+    onKeydown: EventName<KeyboardEvent>;
+}>;
+/** The underlying custom element type for LuzmoButton */
+export type LuzmoButtonElement = LuzmoButtonClass;

package/esm/components/button.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoButton as LuzmoButtonClass } from '@luzmo/lucero/button';
+const LuzmoButtonComponent = createComponent({
+    tagName: 'luzmo-button',
+    elementClass: LuzmoButtonClass,
+    react: React,
+    events: {
+        onChange: 'change',
+        onKeydown: 'keydown'
+    }
+});
+/**
+ * React wrapper for <luzmo-button>
+ *
+ * @event onChange - Announces that the `value` of the element has changed
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export const LuzmoButton = LuzmoButtonComponent;

package/esm/components/calendar.d.ts

@@ -0,0 +1,13 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoCalendar as LuzmoCalendarClass } from '@luzmo/lucero/calendar';
+/**
+ * React wrapper for <luzmo-calendar>
+ */
+export declare const LuzmoCalendar: ReactWebComponent<LuzmoCalendarClass, {
+    onMonthChange: EventName<CustomEvent>;
+    onChange: EventName<CustomEvent>;
+    onRangeSelect: EventName<CustomEvent>;
+    onHoverDate: EventName<CustomEvent>;
+}>;
+/** The underlying custom element type for LuzmoCalendar */
+export type LuzmoCalendarElement = LuzmoCalendarClass;

package/esm/components/calendar.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoCalendar as LuzmoCalendarClass } from '@luzmo/lucero/calendar';
+const LuzmoCalendarComponent = createComponent({
+    tagName: 'luzmo-calendar',
+    elementClass: LuzmoCalendarClass,
+    react: React,
+    events: {
+        onMonthChange: 'month-change',
+        onChange: 'change',
+        onRangeSelect: 'range-select',
+        onHoverDate: 'hover-date'
+    }
+});
+/**
+ * React wrapper for <luzmo-calendar>
+ */
+export const LuzmoCalendar = LuzmoCalendarComponent;

package/esm/components/chat-message-group.d.ts

@@ -0,0 +1,11 @@
+import { ReactWebComponent } from '@lit/react';
+import { LuzmoChatMessageGroup as LuzmoChatMessageGroupClass } from '@luzmo/lucero/chat-message-group';
+/**
+ * A chat message group component for displaying consecutive messages from the same user.
+ *
+ * When multiple messages are grouped together, only the first or last message
+ * will display the name/date metadata and avatar, reducing visual clutter.
+ */
+export declare const LuzmoChatMessageGroup: ReactWebComponent<LuzmoChatMessageGroupClass>;
+/** The underlying custom element type for LuzmoChatMessageGroup */
+export type LuzmoChatMessageGroupElement = LuzmoChatMessageGroupClass;

package/esm/components/chat-message-group.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoChatMessageGroup as LuzmoChatMessageGroupClass } from '@luzmo/lucero/chat-message-group';
+const LuzmoChatMessageGroupComponent = createComponent({
+    tagName: 'luzmo-chat-message-group',
+    elementClass: LuzmoChatMessageGroupClass,
+    react: React,
+    events: {}
+});
+/**
+ * A chat message group component for displaying consecutive messages from the same user.
+ *
+ * When multiple messages are grouped together, only the first or last message
+ * will display the name/date metadata and avatar, reducing visual clutter.
+ */
+export const LuzmoChatMessageGroup = LuzmoChatMessageGroupComponent;

package/esm/components/chat-message.d.ts

@@ -0,0 +1,8 @@
+import { ReactWebComponent } from '@lit/react';
+import { LuzmoChatMessage as LuzmoChatMessageClass } from '@luzmo/lucero/chat-message';
+/**
+ * A chat message component for displaying conversation messages.
+ */
+export declare const LuzmoChatMessage: ReactWebComponent<LuzmoChatMessageClass>;
+/** The underlying custom element type for LuzmoChatMessage */
+export type LuzmoChatMessageElement = LuzmoChatMessageClass;

package/esm/components/chat-message.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoChatMessage as LuzmoChatMessageClass } from '@luzmo/lucero/chat-message';
+const LuzmoChatMessageComponent = createComponent({
+    tagName: 'luzmo-chat-message',
+    elementClass: LuzmoChatMessageClass,
+    react: React,
+    events: {}
+});
+/**
+ * A chat message component for displaying conversation messages.
+ */
+export const LuzmoChatMessage = LuzmoChatMessageComponent;

package/esm/components/checkbox.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoCheckbox as LuzmoCheckboxClass } from '@luzmo/lucero/checkbox';
+/**
+ * React wrapper for <luzmo-checkbox>
+ *
+ * @event onChange - Announces a change in the `checked` property of a Checkbox
+ */
+export declare const LuzmoCheckbox: ReactWebComponent<LuzmoCheckboxClass, {
+    onChange: EventName<CustomEvent>;
+}>;
+/** The underlying custom element type for LuzmoCheckbox */
+export type LuzmoCheckboxElement = LuzmoCheckboxClass;

package/esm/components/checkbox.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoCheckbox as LuzmoCheckboxClass } from '@luzmo/lucero/checkbox';
+const LuzmoCheckboxComponent = createComponent({
+    tagName: 'luzmo-checkbox',
+    elementClass: LuzmoCheckboxClass,
+    react: React,
+    events: {
+        onChange: 'change'
+    }
+});
+/**
+ * React wrapper for <luzmo-checkbox>
+ *
+ * @event onChange - Announces a change in the `checked` property of a Checkbox
+ */
+export const LuzmoCheckbox = LuzmoCheckboxComponent;

package/esm/components/color-area.d.ts

@@ -0,0 +1,14 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoColorArea as LuzmoColorAreaClass } from '@luzmo/lucero/color-area';
+/**
+ * React wrapper for <luzmo-color-area>
+ *
+ * @event onInput - The value of the Color Area has changed.
+ * @event onChange - An alteration to the value of the Color Area has been committed by the user.
+ */
+export declare const LuzmoColorArea: ReactWebComponent<LuzmoColorAreaClass, {
+    onInput: EventName<Event>;
+    onChange: EventName<Event>;
+}>;
+/** The underlying custom element type for LuzmoColorArea */
+export type LuzmoColorAreaElement = LuzmoColorAreaClass;

package/esm/components/color-area.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoColorArea as LuzmoColorAreaClass } from '@luzmo/lucero/color-area';
+const LuzmoColorAreaComponent = createComponent({
+    tagName: 'luzmo-color-area',
+    elementClass: LuzmoColorAreaClass,
+    react: React,
+    events: {
+        onInput: 'input',
+        onChange: 'change'
+    }
+});
+/**
+ * React wrapper for <luzmo-color-area>
+ *
+ * @event onInput - The value of the Color Area has changed.
+ * @event onChange - An alteration to the value of the Color Area has been committed by the user.
+ */
+export const LuzmoColorArea = LuzmoColorAreaComponent;

package/esm/components/color-field.d.ts

@@ -0,0 +1,18 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoColorField as LuzmoColorFieldClass } from '@luzmo/lucero/color-field';
+/**
+ * React wrapper for <luzmo-color-field>
+ *
+ * @event onInput - The value of the color-field has changed.
+ * @event onChange - An alteration to the value of the color-field has been committed by the user.
+ * @event onKeypress - A key has been pressed.
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export declare const LuzmoColorField: ReactWebComponent<LuzmoColorFieldClass, {
+    onInput: EventName<CustomEvent>;
+    onChange: EventName<Event>;
+    onKeypress: EventName<CustomEvent>;
+    onKeydown: EventName<KeyboardEvent>;
+}>;
+/** The underlying custom element type for LuzmoColorField */
+export type LuzmoColorFieldElement = LuzmoColorFieldClass;

package/esm/components/color-field.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoColorField as LuzmoColorFieldClass } from '@luzmo/lucero/color-field';
+const LuzmoColorFieldComponent = createComponent({
+    tagName: 'luzmo-color-field',
+    elementClass: LuzmoColorFieldClass,
+    react: React,
+    events: {
+        onInput: 'input',
+        onChange: 'change',
+        onKeypress: 'keypress',
+        onKeydown: 'keydown'
+    }
+});
+/**
+ * React wrapper for <luzmo-color-field>
+ *
+ * @event onInput - The value of the color-field has changed.
+ * @event onChange - An alteration to the value of the color-field has been committed by the user.
+ * @event onKeypress - A key has been pressed.
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export const LuzmoColorField = LuzmoColorFieldComponent;

package/esm/components/color-handle.d.ts

@@ -0,0 +1,8 @@
+import { ReactWebComponent } from '@lit/react';
+import { LuzmoColorHandle as LuzmoColorHandleClass } from '@luzmo/lucero/color-handle';
+/**
+ * React wrapper for <luzmo-color-handle>
+ */
+export declare const LuzmoColorHandle: ReactWebComponent<LuzmoColorHandleClass>;
+/** The underlying custom element type for LuzmoColorHandle */
+export type LuzmoColorHandleElement = LuzmoColorHandleClass;

package/esm/components/color-handle.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoColorHandle as LuzmoColorHandleClass } from '@luzmo/lucero/color-handle';
+const LuzmoColorHandleComponent = createComponent({
+    tagName: 'luzmo-color-handle',
+    elementClass: LuzmoColorHandleClass,
+    react: React,
+    events: {}
+});
+/**
+ * React wrapper for <luzmo-color-handle>
+ */
+export const LuzmoColorHandle = LuzmoColorHandleComponent;

package/esm/components/color-loupe.d.ts

@@ -0,0 +1,8 @@
+import { ReactWebComponent } from '@lit/react';
+import { LuzmoColorLoupe as LuzmoColorLoupeClass } from '@luzmo/lucero/color-loupe';
+/**
+ * React wrapper for <luzmo-color-loupe>
+ */
+export declare const LuzmoColorLoupe: ReactWebComponent<LuzmoColorLoupeClass>;
+/** The underlying custom element type for LuzmoColorLoupe */
+export type LuzmoColorLoupeElement = LuzmoColorLoupeClass;

package/esm/components/color-loupe.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoColorLoupe as LuzmoColorLoupeClass } from '@luzmo/lucero/color-loupe';
+const LuzmoColorLoupeComponent = createComponent({
+    tagName: 'luzmo-color-loupe',
+    elementClass: LuzmoColorLoupeClass,
+    react: React,
+    events: {}
+});
+/**
+ * React wrapper for <luzmo-color-loupe>
+ */
+export const LuzmoColorLoupe = LuzmoColorLoupeComponent;

package/esm/components/color-menu.d.ts

@@ -0,0 +1,14 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoColorMenu as LuzmoColorMenuClass } from '@luzmo/lucero/color-menu';
+/**
+ * React wrapper for <luzmo-color-menu>
+ *
+ * @event onChange - An alteration to the value of the Color Menu has been committed by the user.
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export declare const LuzmoColorMenu: ReactWebComponent<LuzmoColorMenuClass, {
+    onChange: EventName<CustomEvent>;
+    onKeydown: EventName<KeyboardEvent>;
+}>;
+/** The underlying custom element type for LuzmoColorMenu */
+export type LuzmoColorMenuElement = LuzmoColorMenuClass;

package/esm/components/color-menu.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoColorMenu as LuzmoColorMenuClass } from '@luzmo/lucero/color-menu';
+const LuzmoColorMenuComponent = createComponent({
+    tagName: 'luzmo-color-menu',
+    elementClass: LuzmoColorMenuClass,
+    react: React,
+    events: {
+        onChange: 'change',
+        onKeydown: 'keydown'
+    }
+});
+/**
+ * React wrapper for <luzmo-color-menu>
+ *
+ * @event onChange - An alteration to the value of the Color Menu has been committed by the user.
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export const LuzmoColorMenu = LuzmoColorMenuComponent;

package/esm/components/color-palette-group.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoColorPaletteGroup as LuzmoColorPaletteGroupClass } from '@luzmo/lucero/color-palette-group';
+/**
+ * React wrapper for <luzmo-color-palette-group>
+ *
+ * @event onChange - Announces the color palette value has been changed by user
+ */
+export declare const LuzmoColorPaletteGroup: ReactWebComponent<LuzmoColorPaletteGroupClass, {
+    onChange: EventName<Event>;
+}>;
+/** The underlying custom element type for LuzmoColorPaletteGroup */
+export type LuzmoColorPaletteGroupElement = LuzmoColorPaletteGroupClass;

package/esm/components/color-palette-group.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { LuzmoColorPaletteGroup as LuzmoColorPaletteGroupClass } from '@luzmo/lucero/color-palette-group';
+const LuzmoColorPaletteGroupComponent = createComponent({
+    tagName: 'luzmo-color-palette-group',
+    elementClass: LuzmoColorPaletteGroupClass,
+    react: React,
+    events: {
+        onChange: 'change'
+    }
+});
+/**
+ * React wrapper for <luzmo-color-palette-group>
+ *
+ * @event onChange - Announces the color palette value has been changed by user
+ */
+export const LuzmoColorPaletteGroup = LuzmoColorPaletteGroupComponent;

package/esm/components/color-palette.d.ts

@@ -0,0 +1,12 @@
+import { EventName, ReactWebComponent } from '@lit/react';
+import { LuzmoColorPalette as LuzmoColorPaletteClass } from '@luzmo/lucero/color-palette';
+/**
+ * React wrapper for <luzmo-color-palette>
+ *
+ * @event onKeydown - Trick :focus-visible polyfill into thinking keyboard based focus
+ */
+export declare const LuzmoColorPalette: ReactWebComponent<LuzmoColorPaletteClass, {
+    onKeydown: EventName<KeyboardEvent>;
+}>;
+/** The underlying custom element type for LuzmoColorPalette */
+export type LuzmoColorPaletteElement = LuzmoColorPaletteClass;