@xplor-education/react-wrappers 5.3.0 → 6.0.1

package/README.md

@@ -1,30 +1,46 @@
-# React + TypeScript + Vite
+# @xplor-education/react-wrappers
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+React wrappers for the [Stardust Design System](https://masonmaddy.github.io/stardust4/) web components, auto-generated from [`@xplor-education/core-stencil-components`](https://www.npmjs.com/package/@xplor-education/core-stencil-components) via the Stencil React output target.
 
-Currently, two official plugins are available:
+## Install
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+npm install @xplor-education/react-wrappers @xplor-education/core-stencil-components
+```
+
+Peer dependencies: `react` (`^18.0.0 || ^19.0.0`) and `@xplor-education/core-stencil-components`.
 
-## Expanding the ESLint configuration
+## Usage
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+Load fonts and tokens once at app entry, then import components by name:
 
-- Configure the top-level `parserOptions` property like this:
+```tsx
+import '@xplor-education/core-stencil-components/fonts.css';
+import '@xplor-education/core-stencil-components/tokens.css';
+import { XplorButton } from '@xplor-education/react-wrappers';
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
+function App() {
+  return (
+    <XplorButton type="solid" onSdClick={() => save()}>
+      Save
+    </XplorButton>
+  );
 }
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+- Each wrapper registers its underlying custom element on first use — no manual `defineCustomElements()` call needed.
+- Custom events are exposed as typed React props: `sd-click` → `onSdClick`, `sd-change` → `onSdChange`, and so on.
+- The wrappers are client components (the generated module is marked `'use client'`); there is no SSR/hydrate build yet.
+
+See the [core package README](https://www.npmjs.com/package/@xplor-education/core-stencil-components) for fonts, tokens, Tailwind preset, and icons.
+
+## Components
+
+`XplorAccordion`, `XplorAccordionItem`, `XplorAvatar`, `XplorBottomSheet`, `XplorButton`, `XplorCalendar`, `XplorCard`, `XplorCheckbox`, `XplorDatatable`, `XplorDatePicker`, `XplorFab`, `XplorFileUpload`, `XplorInput`, `XplorMenu`, `XplorMenuItem`, `XplorMessageBox`, `XplorModal`, `XplorPill`, `XplorRadioButton`, `XplorSelectionPill`, `XplorTabPanel`, `XplorTabs`, `XplorTimePicker`, `XplorTitleBlock`, `XplorToast`, `XplorToastStack`, `XplorToggle`, `XplorTooltip`
+
+Props, events, and design guidance for each component live on the [Stardust docs site](https://masonmaddy.github.io/stardust4/).
+
+## Links
+
+- [Stardust Design System docs](https://masonmaddy.github.io/stardust4/) — the design reference
+- [Repository](https://github.com/myxplor/stardust-components)

package/dist/components.d.ts

@@ -0,0 +1,372 @@
+import { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { AutocompleteItem, ComboboxItem, DatatablePagination, DatatableRow, MenuOption, XplorAccordionCustomEvent, XplorAccordionItemCustomEvent, XplorAlertDialogCustomEvent, XplorAlertMessageCustomEvent, XplorAutocompleteCustomEvent, XplorBottomSheetCustomEvent, XplorBtnBackCustomEvent, XplorBtnBackToParentCustomEvent, XplorBtnIconCustomEvent, XplorBtnMenuCustomEvent, XplorBtnToggleCustomEvent, XplorBtnToggleSecondaryCustomEvent, XplorCalendarCustomEvent, XplorCardCustomEvent, XplorCheckboxCustomEvent, XplorComboboxCustomEvent, XplorDatatableCustomEvent, XplorDatePickerCustomEvent, XplorDragAndDropInputCustomEvent, XplorDropdownCustomEvent, XplorExpansionPanelCustomEvent, XplorFabCustomEvent, XplorFileUploadCustomEvent, XplorInlineCheckboxCustomEvent, XplorInlineDatePickerCustomEvent, XplorInlineSwitchCustomEvent, XplorInputCustomEvent, XplorInputFileCustomEvent, XplorInputSearchCustomEvent, XplorInputSelectCustomEvent, XplorInputSendCustomEvent, XplorInputTextAreaCustomEvent, XplorInputTextCustomEvent, XplorInputTextSecondaryCustomEvent, XplorInputTitleCustomEvent, XplorMenuCustomEvent, XplorMenuItemCustomEvent, XplorMessageBoxCustomEvent, XplorModalPersistentCustomEvent, XplorNavTabsCustomEvent, XplorRadioBtnCustomEvent, XplorRadioButtonCustomEvent, XplorSelectionPillCustomEvent, XplorTableCustomEvent, XplorTabsCustomEvent, XplorTextFieldCustomEvent, XplorTimePickerCustomEvent, XplorToastCustomEvent, XplorToggleCustomEvent, XplorTooltipCustomEvent, XplorUploadedFile } from '@xplor-education/core-stencil-components';
+import { Components } from '@xplor-education/core-stencil-components/components';
+import { XplorAccordionItem as XplorAccordionItemElement } from '@xplor-education/core-stencil-components/components/xplor-accordion-item.js';
+import { XplorAccordion as XplorAccordionElement } from '@xplor-education/core-stencil-components/components/xplor-accordion.js';
+import { XplorAlertDialog as XplorAlertDialogElement } from '@xplor-education/core-stencil-components/components/xplor-alert-dialog.js';
+import { XplorAlertMessage as XplorAlertMessageElement } from '@xplor-education/core-stencil-components/components/xplor-alert-message.js';
+import { XplorAutocomplete as XplorAutocompleteElement } from '@xplor-education/core-stencil-components/components/xplor-autocomplete.js';
+import { XplorAvatarAndName as XplorAvatarAndNameElement } from '@xplor-education/core-stencil-components/components/xplor-avatar-and-name.js';
+import { XplorAvatar as XplorAvatarElement } from '@xplor-education/core-stencil-components/components/xplor-avatar.js';
+import { XplorBadgeSessionBooking as XplorBadgeSessionBookingElement } from '@xplor-education/core-stencil-components/components/xplor-badge-session-booking.js';
+import { XplorBadge as XplorBadgeElement } from '@xplor-education/core-stencil-components/components/xplor-badge.js';
+import { XplorBottomSheet as XplorBottomSheetElement } from '@xplor-education/core-stencil-components/components/xplor-bottom-sheet.js';
+import { XplorBtnBackToParent as XplorBtnBackToParentElement } from '@xplor-education/core-stencil-components/components/xplor-btn-back-to-parent.js';
+import { XplorBtnBack as XplorBtnBackElement } from '@xplor-education/core-stencil-components/components/xplor-btn-back.js';
+import { XplorBtnIcon as XplorBtnIconElement } from '@xplor-education/core-stencil-components/components/xplor-btn-icon.js';
+import { XplorBtnMenu as XplorBtnMenuElement } from '@xplor-education/core-stencil-components/components/xplor-btn-menu.js';
+import { XplorBtnToggleGroup as XplorBtnToggleGroupElement } from '@xplor-education/core-stencil-components/components/xplor-btn-toggle-group.js';
+import { XplorBtnToggleSecondary as XplorBtnToggleSecondaryElement } from '@xplor-education/core-stencil-components/components/xplor-btn-toggle-secondary.js';
+import { XplorBtnToggle as XplorBtnToggleElement } from '@xplor-education/core-stencil-components/components/xplor-btn-toggle.js';
+import { XplorBtnTooltip as XplorBtnTooltipElement } from '@xplor-education/core-stencil-components/components/xplor-btn-tooltip.js';
+import { XplorCalendar as XplorCalendarElement } from '@xplor-education/core-stencil-components/components/xplor-calendar.js';
+import { XplorCard as XplorCardElement } from '@xplor-education/core-stencil-components/components/xplor-card.js';
+import { XplorCheckbox as XplorCheckboxElement } from '@xplor-education/core-stencil-components/components/xplor-checkbox.js';
+import { XplorCombobox as XplorComboboxElement } from '@xplor-education/core-stencil-components/components/xplor-combobox.js';
+import { XplorDatatable as XplorDatatableElement } from '@xplor-education/core-stencil-components/components/xplor-datatable.js';
+import { XplorDatePicker as XplorDatePickerElement } from '@xplor-education/core-stencil-components/components/xplor-date-picker.js';
+import { XplorDragAndDropInput as XplorDragAndDropInputElement } from '@xplor-education/core-stencil-components/components/xplor-drag-and-drop-input.js';
+import { XplorDropdown as XplorDropdownElement } from '@xplor-education/core-stencil-components/components/xplor-dropdown.js';
+import { XplorExpansionPanel as XplorExpansionPanelElement } from '@xplor-education/core-stencil-components/components/xplor-expansion-panel.js';
+import { XplorExpansionPanels as XplorExpansionPanelsElement } from '@xplor-education/core-stencil-components/components/xplor-expansion-panels.js';
+import { XplorFab as XplorFabElement } from '@xplor-education/core-stencil-components/components/xplor-fab.js';
+import { XplorFileUpload as XplorFileUploadElement } from '@xplor-education/core-stencil-components/components/xplor-file-upload.js';
+import { XplorInlineCheckbox as XplorInlineCheckboxElement } from '@xplor-education/core-stencil-components/components/xplor-inline-checkbox.js';
+import { XplorInlineDatePicker as XplorInlineDatePickerElement } from '@xplor-education/core-stencil-components/components/xplor-inline-date-picker.js';
+import { XplorInlineSwitch as XplorInlineSwitchElement } from '@xplor-education/core-stencil-components/components/xplor-inline-switch.js';
+import { XplorInputFile as XplorInputFileElement } from '@xplor-education/core-stencil-components/components/xplor-input-file.js';
+import { XplorInputSearch as XplorInputSearchElement } from '@xplor-education/core-stencil-components/components/xplor-input-search.js';
+import { XplorInputSelect as XplorInputSelectElement } from '@xplor-education/core-stencil-components/components/xplor-input-select.js';
+import { XplorInputSend as XplorInputSendElement } from '@xplor-education/core-stencil-components/components/xplor-input-send.js';
+import { XplorInputTextArea as XplorInputTextAreaElement } from '@xplor-education/core-stencil-components/components/xplor-input-text-area.js';
+import { XplorInputTextSecondary as XplorInputTextSecondaryElement } from '@xplor-education/core-stencil-components/components/xplor-input-text-secondary.js';
+import { XplorInputText as XplorInputTextElement } from '@xplor-education/core-stencil-components/components/xplor-input-text.js';
+import { XplorInputTitle as XplorInputTitleElement } from '@xplor-education/core-stencil-components/components/xplor-input-title.js';
+import { XplorInput as XplorInputElement } from '@xplor-education/core-stencil-components/components/xplor-input.js';
+import { XplorLinks as XplorLinksElement } from '@xplor-education/core-stencil-components/components/xplor-links.js';
+import { XplorMenuItem as XplorMenuItemElement } from '@xplor-education/core-stencil-components/components/xplor-menu-item.js';
+import { XplorMenu as XplorMenuElement } from '@xplor-education/core-stencil-components/components/xplor-menu.js';
+import { XplorMessageBox as XplorMessageBoxElement } from '@xplor-education/core-stencil-components/components/xplor-message-box.js';
+import { XplorModalPersistent as XplorModalPersistentElement } from '@xplor-education/core-stencil-components/components/xplor-modal-persistent.js';
+import { XplorNavTabs as XplorNavTabsElement } from '@xplor-education/core-stencil-components/components/xplor-nav-tabs.js';
+import { XplorPill as XplorPillElement } from '@xplor-education/core-stencil-components/components/xplor-pill.js';
+import { XplorRadioBtn as XplorRadioBtnElement } from '@xplor-education/core-stencil-components/components/xplor-radio-btn.js';
+import { XplorRadioButton as XplorRadioButtonElement } from '@xplor-education/core-stencil-components/components/xplor-radio-button.js';
+import { XplorSectionCard as XplorSectionCardElement } from '@xplor-education/core-stencil-components/components/xplor-section-card.js';
+import { XplorSectionHeading as XplorSectionHeadingElement } from '@xplor-education/core-stencil-components/components/xplor-section-heading.js';
+import { XplorSelectionPill as XplorSelectionPillElement } from '@xplor-education/core-stencil-components/components/xplor-selection-pill.js';
+import { XplorTabPanel as XplorTabPanelElement } from '@xplor-education/core-stencil-components/components/xplor-tab-panel.js';
+import { XplorTable as XplorTableElement } from '@xplor-education/core-stencil-components/components/xplor-table.js';
+import { XplorTabs as XplorTabsElement } from '@xplor-education/core-stencil-components/components/xplor-tabs.js';
+import { XplorTextBubble as XplorTextBubbleElement } from '@xplor-education/core-stencil-components/components/xplor-text-bubble.js';
+import { XplorTextField as XplorTextFieldElement } from '@xplor-education/core-stencil-components/components/xplor-text-field.js';
+import { XplorTimePicker as XplorTimePickerElement } from '@xplor-education/core-stencil-components/components/xplor-time-picker.js';
+import { XplorTitleBlock as XplorTitleBlockElement } from '@xplor-education/core-stencil-components/components/xplor-title-block.js';
+import { XplorToastStack as XplorToastStackElement } from '@xplor-education/core-stencil-components/components/xplor-toast-stack.js';
+import { XplorToast as XplorToastElement } from '@xplor-education/core-stencil-components/components/xplor-toast.js';
+import { XplorToggle as XplorToggleElement } from '@xplor-education/core-stencil-components/components/xplor-toggle.js';
+import { XplorTooltip as XplorTooltipElement } from '@xplor-education/core-stencil-components/components/xplor-tooltip.js';
+export type XplorAccordionEvents = {
+    onSdToggle: EventName<XplorAccordionCustomEvent<number>>;
+};
+export declare const XplorAccordion: StencilReactComponent<XplorAccordionElement, XplorAccordionEvents, Components.XplorAccordion>;
+export type XplorAccordionItemEvents = {
+    onSdItemToggle: EventName<XplorAccordionItemCustomEvent<void>>;
+};
+export declare const XplorAccordionItem: StencilReactComponent<XplorAccordionItemElement, XplorAccordionItemEvents, Components.XplorAccordionItem>;
+export type XplorAlertDialogEvents = {
+    onXplorClose: EventName<XplorAlertDialogCustomEvent<void>>;
+    onXplorDialogChange: EventName<XplorAlertDialogCustomEvent<boolean>>;
+};
+export declare const XplorAlertDialog: StencilReactComponent<XplorAlertDialogElement, XplorAlertDialogEvents, Components.XplorAlertDialog>;
+export type XplorAlertMessageEvents = {
+    onXplorDismiss: EventName<XplorAlertMessageCustomEvent<void>>;
+};
+export declare const XplorAlertMessage: StencilReactComponent<XplorAlertMessageElement, XplorAlertMessageEvents, Components.XplorAlertMessage>;
+export type XplorAutocompleteEvents = {
+    onXplorChange: EventName<XplorAutocompleteCustomEvent<string | number | boolean | (string | number | boolean)[] | null>>;
+    onXplorSelect: EventName<XplorAutocompleteCustomEvent<AutocompleteItem>>;
+    onXplorClear: EventName<XplorAutocompleteCustomEvent<void>>;
+    onXplorSearch: EventName<XplorAutocompleteCustomEvent<string>>;
+};
+export declare const XplorAutocomplete: StencilReactComponent<XplorAutocompleteElement, XplorAutocompleteEvents, Components.XplorAutocomplete>;
+export type XplorAvatarEvents = NonNullable<unknown>;
+export declare const XplorAvatar: StencilReactComponent<XplorAvatarElement, XplorAvatarEvents, Components.XplorAvatar>;
+export type XplorAvatarAndNameEvents = NonNullable<unknown>;
+export declare const XplorAvatarAndName: StencilReactComponent<XplorAvatarAndNameElement, XplorAvatarAndNameEvents, Components.XplorAvatarAndName>;
+export type XplorBadgeEvents = NonNullable<unknown>;
+export declare const XplorBadge: StencilReactComponent<XplorBadgeElement, XplorBadgeEvents, Components.XplorBadge>;
+export type XplorBadgeSessionBookingEvents = NonNullable<unknown>;
+export declare const XplorBadgeSessionBooking: StencilReactComponent<XplorBadgeSessionBookingElement, XplorBadgeSessionBookingEvents, Components.XplorBadgeSessionBooking, 'booking' | 'item'>;
+export type XplorBottomSheetEvents = {
+    onSdClose: EventName<XplorBottomSheetCustomEvent<void>>;
+};
+export declare const XplorBottomSheet: StencilReactComponent<XplorBottomSheetElement, XplorBottomSheetEvents, Components.XplorBottomSheet>;
+export type XplorBtnBackEvents = {
+    onXplorClick: EventName<XplorBtnBackCustomEvent<MouseEvent>>;
+};
+export declare const XplorBtnBack: StencilReactComponent<XplorBtnBackElement, XplorBtnBackEvents, Components.XplorBtnBack>;
+export type XplorBtnBackToParentEvents = {
+    onBack: EventName<XplorBtnBackToParentCustomEvent<void>>;
+};
+export declare const XplorBtnBackToParent: StencilReactComponent<XplorBtnBackToParentElement, XplorBtnBackToParentEvents, Components.XplorBtnBackToParent>;
+export type XplorBtnIconEvents = {
+    onXplorClick: EventName<XplorBtnIconCustomEvent<MouseEvent>>;
+};
+export declare const XplorBtnIcon: StencilReactComponent<XplorBtnIconElement, XplorBtnIconEvents, Components.XplorBtnIcon>;
+export type XplorBtnMenuEvents = {
+    onXplorClick: EventName<XplorBtnMenuCustomEvent<MenuOption>>;
+};
+export declare const XplorBtnMenu: StencilReactComponent<XplorBtnMenuElement, XplorBtnMenuEvents, Components.XplorBtnMenu>;
+export type XplorBtnToggleEvents = {
+    onXplorToggle: EventName<XplorBtnToggleCustomEvent<any>>;
+};
+export declare const XplorBtnToggle: StencilReactComponent<XplorBtnToggleElement, XplorBtnToggleEvents, Components.XplorBtnToggle>;
+export type XplorBtnToggleGroupEvents = NonNullable<unknown>;
+export declare const XplorBtnToggleGroup: StencilReactComponent<XplorBtnToggleGroupElement, XplorBtnToggleGroupEvents, Components.XplorBtnToggleGroup>;
+export type XplorBtnToggleSecondaryEvents = {
+    onXplorToggle: EventName<XplorBtnToggleSecondaryCustomEvent<boolean>>;
+};
+export declare const XplorBtnToggleSecondary: StencilReactComponent<XplorBtnToggleSecondaryElement, XplorBtnToggleSecondaryEvents, Components.XplorBtnToggleSecondary>;
+export type XplorBtnTooltipEvents = NonNullable<unknown>;
+export declare const XplorBtnTooltip: StencilReactComponent<XplorBtnTooltipElement, XplorBtnTooltipEvents, Components.XplorBtnTooltip>;
+export type XplorCalendarEvents = {
+    onSdSelect: EventName<XplorCalendarCustomEvent<string>>;
+    onSdMonthChange: EventName<XplorCalendarCustomEvent<{
+        month: number;
+        year: number;
+    }>>;
+};
+export declare const XplorCalendar: StencilReactComponent<XplorCalendarElement, XplorCalendarEvents, Components.XplorCalendar>;
+export type XplorCardEvents = {
+    onSdClick: EventName<XplorCardCustomEvent<void>>;
+    onSdChange: EventName<XplorCardCustomEvent<boolean>>;
+    onXplorCardClick: EventName<XplorCardCustomEvent<{
+        href: string;
+    }>>;
+};
+export declare const XplorCard: StencilReactComponent<XplorCardElement, XplorCardEvents, Components.XplorCard>;
+export type XplorCheckboxEvents = {
+    onSdChange: EventName<XplorCheckboxCustomEvent<boolean>>;
+    onCheckboxChange: EventName<XplorCheckboxCustomEvent<{
+        checked: boolean;
+        indeterminate: boolean;
+    }>>;
+};
+export declare const XplorCheckbox: StencilReactComponent<XplorCheckboxElement, XplorCheckboxEvents, Components.XplorCheckbox>;
+export type XplorComboboxEvents = {
+    onXplorChange: EventName<XplorComboboxCustomEvent<string | number | boolean | (string | number | boolean)[] | null>>;
+    onXplorSelect: EventName<XplorComboboxCustomEvent<ComboboxItem>>;
+    onXplorCreate: EventName<XplorComboboxCustomEvent<string>>;
+    onXplorClear: EventName<XplorComboboxCustomEvent<void>>;
+    onXplorSearch: EventName<XplorComboboxCustomEvent<string>>;
+};
+export declare const XplorCombobox: StencilReactComponent<XplorComboboxElement, XplorComboboxEvents, Components.XplorCombobox>;
+export type XplorDatatableEvents = {
+    onRowClick: EventName<XplorDatatableCustomEvent<DatatableRow>>;
+    onXplorSelectionChange: EventName<XplorDatatableCustomEvent<DatatableRow[]>>;
+    onPaginationChange: EventName<XplorDatatableCustomEvent<DatatablePagination>>;
+    onSortChange: EventName<XplorDatatableCustomEvent<{
+        column: string;
+        direction: 'asc' | 'desc' | null;
+    }>>;
+};
+export declare const XplorDatatable: StencilReactComponent<XplorDatatableElement, XplorDatatableEvents, Components.XplorDatatable>;
+export type XplorDatePickerEvents = {
+    onDateChange: EventName<XplorDatePickerCustomEvent<string>>;
+    onXplorFocus: EventName<XplorDatePickerCustomEvent<FocusEvent>>;
+    onXplorBlur: EventName<XplorDatePickerCustomEvent<FocusEvent>>;
+    onXplorClear: EventName<XplorDatePickerCustomEvent<void>>;
+};
+export declare const XplorDatePicker: StencilReactComponent<XplorDatePickerElement, XplorDatePickerEvents, Components.XplorDatePicker>;
+export type XplorDragAndDropInputEvents = {
+    onFileSelect: EventName<XplorDragAndDropInputCustomEvent<File>>;
+    onFileClear: EventName<XplorDragAndDropInputCustomEvent<void>>;
+};
+export declare const XplorDragAndDropInput: StencilReactComponent<XplorDragAndDropInputElement, XplorDragAndDropInputEvents, Components.XplorDragAndDropInput>;
+export type XplorDropdownEvents = {
+    onXplorChange: EventName<XplorDropdownCustomEvent<string>>;
+};
+export declare const XplorDropdown: StencilReactComponent<XplorDropdownElement, XplorDropdownEvents, Components.XplorDropdown>;
+export type XplorExpansionPanelEvents = {
+    onXplorPanelToggle: EventName<XplorExpansionPanelCustomEvent<{
+        id: string;
+        isOpen: boolean;
+    }>>;
+};
+export declare const XplorExpansionPanel: StencilReactComponent<XplorExpansionPanelElement, XplorExpansionPanelEvents, Components.XplorExpansionPanel>;
+export type XplorExpansionPanelsEvents = NonNullable<unknown>;
+export declare const XplorExpansionPanels: StencilReactComponent<XplorExpansionPanelsElement, XplorExpansionPanelsEvents, Components.XplorExpansionPanels>;
+export type XplorFabEvents = {
+    onSdClick: EventName<XplorFabCustomEvent<void>>;
+};
+export declare const XplorFab: StencilReactComponent<XplorFabElement, XplorFabEvents, Components.XplorFab>;
+export type XplorFileUploadEvents = {
+    onSdFilesSelected: EventName<XplorFileUploadCustomEvent<File[]>>;
+    onSdFileRemoved: EventName<XplorFileUploadCustomEvent<File>>;
+    onSdFileError: EventName<XplorFileUploadCustomEvent<{
+        file: File;
+        reason: string;
+    }>>;
+    onXplorFileAdd: EventName<XplorFileUploadCustomEvent<XplorUploadedFile[]>>;
+    onXplorFileRemove: EventName<XplorFileUploadCustomEvent<XplorUploadedFile>>;
+    onXplorError: EventName<XplorFileUploadCustomEvent<string>>;
+};
+export declare const XplorFileUpload: StencilReactComponent<XplorFileUploadElement, XplorFileUploadEvents, Components.XplorFileUpload>;
+export type XplorInlineCheckboxEvents = {
+    onXplorChange: EventName<XplorInlineCheckboxCustomEvent<boolean>>;
+};
+export declare const XplorInlineCheckbox: StencilReactComponent<XplorInlineCheckboxElement, XplorInlineCheckboxEvents, Components.XplorInlineCheckbox>;
+export type XplorInlineDatePickerEvents = {
+    onDateSelected: EventName<XplorInlineDatePickerCustomEvent<string>>;
+    onMonthChanged: EventName<XplorInlineDatePickerCustomEvent<{
+        year: number;
+        month: number;
+    }>>;
+};
+export declare const XplorInlineDatePicker: StencilReactComponent<XplorInlineDatePickerElement, XplorInlineDatePickerEvents, Components.XplorInlineDatePicker>;
+export type XplorInlineSwitchEvents = {
+    onXplorChange: EventName<XplorInlineSwitchCustomEvent<boolean>>;
+};
+export declare const XplorInlineSwitch: StencilReactComponent<XplorInlineSwitchElement, XplorInlineSwitchEvents, Components.XplorInlineSwitch>;
+export type XplorInputEvents = {
+    onSdChange: EventName<XplorInputCustomEvent<string>>;
+    onSdInput: EventName<XplorInputCustomEvent<string>>;
+    onSdClear: EventName<XplorInputCustomEvent<void>>;
+    onSdSearch: EventName<XplorInputCustomEvent<string>>;
+    onSdSend: EventName<XplorInputCustomEvent<string>>;
+    onSdFocus: EventName<XplorInputCustomEvent<FocusEvent>>;
+    onSdBlur: EventName<XplorInputCustomEvent<FocusEvent>>;
+};
+export declare const XplorInput: StencilReactComponent<XplorInputElement, XplorInputEvents, Components.XplorInput>;
+export type XplorInputFileEvents = {
+    onAttach: EventName<XplorInputFileCustomEvent<File[]>>;
+    onXplorClear: EventName<XplorInputFileCustomEvent<void>>;
+};
+export declare const XplorInputFile: StencilReactComponent<XplorInputFileElement, XplorInputFileEvents, Components.XplorInputFile>;
+export type XplorInputSearchEvents = {
+    onSearch: EventName<XplorInputSearchCustomEvent<string>>;
+};
+export declare const XplorInputSearch: StencilReactComponent<XplorInputSearchElement, XplorInputSearchEvents, Components.XplorInputSearch>;
+export type XplorInputSelectEvents = {
+    onXplorChange: EventName<XplorInputSelectCustomEvent<string | number | boolean | (string | number | boolean)[] | null>>;
+};
+export declare const XplorInputSelect: StencilReactComponent<XplorInputSelectElement, XplorInputSelectEvents, Components.XplorInputSelect>;
+export type XplorInputSendEvents = {
+    onXplorSend: EventName<XplorInputSendCustomEvent<string>>;
+    onXplorValueChange: EventName<XplorInputSendCustomEvent<string>>;
+};
+export declare const XplorInputSend: StencilReactComponent<XplorInputSendElement, XplorInputSendEvents, Components.XplorInputSend>;
+export type XplorInputTextEvents = {
+    onXplorInput: EventName<XplorInputTextCustomEvent<string>>;
+    onXplorChange: EventName<XplorInputTextCustomEvent<string>>;
+    onXplorFocus: EventName<XplorInputTextCustomEvent<FocusEvent>>;
+    onXplorBlur: EventName<XplorInputTextCustomEvent<FocusEvent>>;
+};
+export declare const XplorInputText: StencilReactComponent<XplorInputTextElement, XplorInputTextEvents, Components.XplorInputText>;
+export type XplorInputTextAreaEvents = {
+    onXplorInput: EventName<XplorInputTextAreaCustomEvent<string>>;
+    onXplorChange: EventName<XplorInputTextAreaCustomEvent<string>>;
+    onXplorClear: EventName<XplorInputTextAreaCustomEvent<void>>;
+};
+export declare const XplorInputTextArea: StencilReactComponent<XplorInputTextAreaElement, XplorInputTextAreaEvents, Components.XplorInputTextArea>;
+export type XplorInputTextSecondaryEvents = {
+    onXplorInput: EventName<XplorInputTextSecondaryCustomEvent<string>>;
+    onXplorChange: EventName<XplorInputTextSecondaryCustomEvent<string>>;
+    onXplorFocus: EventName<XplorInputTextSecondaryCustomEvent<FocusEvent>>;
+    onXplorBlur: EventName<XplorInputTextSecondaryCustomEvent<FocusEvent>>;
+};
+export declare const XplorInputTextSecondary: StencilReactComponent<XplorInputTextSecondaryElement, XplorInputTextSecondaryEvents, Components.XplorInputTextSecondary>;
+export type XplorInputTitleEvents = {
+    onXplorInput: EventName<XplorInputTitleCustomEvent<string>>;
+    onXplorChange: EventName<XplorInputTitleCustomEvent<string>>;
+};
+export declare const XplorInputTitle: StencilReactComponent<XplorInputTitleElement, XplorInputTitleEvents, Components.XplorInputTitle>;
+export type XplorLinksEvents = NonNullable<unknown>;
+export declare const XplorLinks: StencilReactComponent<XplorLinksElement, XplorLinksEvents, Components.XplorLinks>;
+export type XplorMenuEvents = {
+    onSdClose: EventName<XplorMenuCustomEvent<void>>;
+};
+export declare const XplorMenu: StencilReactComponent<XplorMenuElement, XplorMenuEvents, Components.XplorMenu>;
+export type XplorMenuItemEvents = {
+    onSdSelect: EventName<XplorMenuItemCustomEvent<void>>;
+};
+export declare const XplorMenuItem: StencilReactComponent<XplorMenuItemElement, XplorMenuItemEvents, Components.XplorMenuItem>;
+export type XplorMessageBoxEvents = {
+    onSdDismiss: EventName<XplorMessageBoxCustomEvent<void>>;
+};
+export declare const XplorMessageBox: StencilReactComponent<XplorMessageBoxElement, XplorMessageBoxEvents, Components.XplorMessageBox>;
+export type XplorModalPersistentEvents = {
+    onXplorClose: EventName<XplorModalPersistentCustomEvent<void>>;
+};
+export declare const XplorModalPersistent: StencilReactComponent<XplorModalPersistentElement, XplorModalPersistentEvents, Components.XplorModalPersistent>;
+export type XplorNavTabsEvents = {
+    onXplorChange: EventName<XplorNavTabsCustomEvent<string>>;
+};
+export declare const XplorNavTabs: StencilReactComponent<XplorNavTabsElement, XplorNavTabsEvents, Components.XplorNavTabs>;
+export type XplorPillEvents = NonNullable<unknown>;
+export declare const XplorPill: StencilReactComponent<XplorPillElement, XplorPillEvents, Components.XplorPill>;
+export type XplorRadioBtnEvents = {
+    onRadioChange: EventName<XplorRadioBtnCustomEvent<{
+        value: string;
+        checked: boolean;
+    }>>;
+};
+export declare const XplorRadioBtn: StencilReactComponent<XplorRadioBtnElement, XplorRadioBtnEvents, Components.XplorRadioBtn>;
+export type XplorRadioButtonEvents = {
+    onSdChange: EventName<XplorRadioButtonCustomEvent<string>>;
+};
+export declare const XplorRadioButton: StencilReactComponent<XplorRadioButtonElement, XplorRadioButtonEvents, Components.XplorRadioButton>;
+export type XplorSectionCardEvents = NonNullable<unknown>;
+export declare const XplorSectionCard: StencilReactComponent<XplorSectionCardElement, XplorSectionCardEvents, Components.XplorSectionCard>;
+export type XplorSectionHeadingEvents = NonNullable<unknown>;
+export declare const XplorSectionHeading: StencilReactComponent<XplorSectionHeadingElement, XplorSectionHeadingEvents, Components.XplorSectionHeading>;
+export type XplorSelectionPillEvents = {
+    onSdSelect: EventName<XplorSelectionPillCustomEvent<void>>;
+    onSdDismiss: EventName<XplorSelectionPillCustomEvent<void>>;
+};
+export declare const XplorSelectionPill: StencilReactComponent<XplorSelectionPillElement, XplorSelectionPillEvents, Components.XplorSelectionPill>;
+export type XplorTabPanelEvents = NonNullable<unknown>;
+export declare const XplorTabPanel: StencilReactComponent<XplorTabPanelElement, XplorTabPanelEvents, Components.XplorTabPanel>;
+export type XplorTableEvents = {
+    onTableSelect: EventName<XplorTableCustomEvent<any>>;
+};
+export declare const XplorTable: StencilReactComponent<XplorTableElement, XplorTableEvents, Components.XplorTable>;
+export type XplorTabsEvents = {
+    onSdTabChange: EventName<XplorTabsCustomEvent<number>>;
+};
+export declare const XplorTabs: StencilReactComponent<XplorTabsElement, XplorTabsEvents, Components.XplorTabs>;
+export type XplorTextBubbleEvents = NonNullable<unknown>;
+export declare const XplorTextBubble: StencilReactComponent<XplorTextBubbleElement, XplorTextBubbleEvents, Components.XplorTextBubble>;
+export type XplorTextFieldEvents = {
+    onValueChange: EventName<XplorTextFieldCustomEvent<string>>;
+    onInputBlur: EventName<XplorTextFieldCustomEvent<FocusEvent>>;
+    onInputFocus: EventName<XplorTextFieldCustomEvent<FocusEvent>>;
+    onClearClick: EventName<XplorTextFieldCustomEvent<void>>;
+};
+export declare const XplorTextField: StencilReactComponent<XplorTextFieldElement, XplorTextFieldEvents, Components.XplorTextField>;
+export type XplorTimePickerEvents = {
+    onSdChange: EventName<XplorTimePickerCustomEvent<string>>;
+    onTimeChange: EventName<XplorTimePickerCustomEvent<string>>;
+    onXplorFocus: EventName<XplorTimePickerCustomEvent<FocusEvent>>;
+    onXplorBlur: EventName<XplorTimePickerCustomEvent<FocusEvent>>;
+    onXplorClear: EventName<XplorTimePickerCustomEvent<void>>;
+};
+export declare const XplorTimePicker: StencilReactComponent<XplorTimePickerElement, XplorTimePickerEvents, Components.XplorTimePicker>;
+export type XplorTitleBlockEvents = NonNullable<unknown>;
+export declare const XplorTitleBlock: StencilReactComponent<XplorTitleBlockElement, XplorTitleBlockEvents, Components.XplorTitleBlock>;
+export type XplorToastEvents = {
+    onSdDismiss: EventName<XplorToastCustomEvent<void>>;
+};
+export declare const XplorToast: StencilReactComponent<XplorToastElement, XplorToastEvents, Components.XplorToast>;
+export type XplorToastStackEvents = NonNullable<unknown>;
+export declare const XplorToastStack: StencilReactComponent<XplorToastStackElement, XplorToastStackEvents, Components.XplorToastStack>;
+export type XplorToggleEvents = {
+    onSdChange: EventName<XplorToggleCustomEvent<boolean>>;
+};
+export declare const XplorToggle: StencilReactComponent<XplorToggleElement, XplorToggleEvents, Components.XplorToggle>;
+export type XplorTooltipEvents = {
+    onSdOpen: EventName<XplorTooltipCustomEvent<void>>;
+    onSdClose: EventName<XplorTooltipCustomEvent<void>>;
+};
+export declare const XplorTooltip: StencilReactComponent<XplorTooltipElement, XplorTooltipEvents, Components.XplorTooltip>;