@beeq/react 1.8.0-beta.1 → 1.8.0-beta.11

package/README.md

@@ -2,35 +2,90 @@
 
 A lightweight utility that wraps BEEQ custom elements ("web components") so they can be used like native React components.
 
+## Why is this necessary?
+
+React and custom elements don't play nicely together. The problem is best described by [Custom Elements Everywhere](https://custom-elements-everywhere.com/#react):
+
+> **Handling data**
+>
+> React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.
+>
+> **Handling events**
+>
+> Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.
+
+This utility solves these problems by exposing a native React component that maps properties and events to the underlying custom element. ✨
+
 ## Package installation
 
+> [!TIP]
+> Please always refer to the [official BEEQ documentation](https://www.beeq.design/3d466e231/p/359a26-for-developers/b/28e01f) for more information about the installation.
+
 - install the package
 
 ```
-npm install @beeq/react
+npm install @beeq/{core,react}
 ```
 
-- update the package
+> [!NOTE]
+> Make sure that you have installed the `@beeq/core` package.
+
+### Add BEEQ styles and assets
 
+Import BEEQ styles into your application's main style file:
+
+```css
+@import "@beeq/core/dist/beeq/beeq.css";
 ```
-npm install @beeq/react@latest
+
+> [!TIP]
+> BEEQ uses SVG icons and these assets are shipped in a separate folder. You can use the `setBasePath` method to set the path to the icons. Make sure that your project bundle the icons in a way that they are accessible from the browser.
+
+You can move the icons from the node_modules folder to your assets folder and set the path like this:
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: './node_modules/@beeq/core/dist/beeq/svg/*',
+          dest: 'icons/svg',
+        },
+        // add more targets if needed
+      ],
+    }),
+  ],
+  // other configurations
+});
 ```
 
-if `@beeq/core` package is installed you should update both
+```js
+// main.ts
+import { setBasePath } from "@beeq/core/dist/components";
 
-```
-npm install @beeq/{core,react}
+setBasePath('icons/svg');
 ```
 
-### Add BEEQ styles and assets
+> Please, notice the path 👆
 
-Make sure that BEEQ main style is imported into your application's main style file:
+But you can also use a different icons library or a CDN:
 
-```css
-@import "@beeq/core/dist/beeq/beeq";
+```js
+import { setBasePath } from "@beeq/core/dist/components";
+
+// Using heroicons library
+setBasePath('https://cdn.jsdelivr.net/npm/heroicons@2.1.5/24/outline');
 ```
 
-> ❗️The icons SVG are shipped in a separate folder. Depending on your React stack, your project will need to include `node_modules/@beeq/core/dist/beeq/svg` in the build in such a way that it respond to: `http://<domain>/svg`
+> [!CAUTION]
+> When using a different icons library, make sure you use the correct icon names provided by the library or the CDN.
 
 ## Usage
 
@@ -52,17 +107,3 @@ function App() {
 
 export default App;
 ```
-
-## Why is this necessary?
-
-React and custom elements don't play nicely together. The problem is best described by [Custom Elements Everywhere](https://custom-elements-everywhere.com/#react):
-
-> **Handling data**
->
-> React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.
->
-> **Handling events**
->
-> Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.
-
-This utility solves these problems by exposing a native React component that maps properties and events to the underlying custom element. ✨

package/package.json

@@ -1,13 +1,14 @@
 {
     "name": "@beeq/react",
-    "version": "1.8.0-beta.1",
+    "version": "1.8.0-beta.11",
     "license": "Apache-2.0",
     "description": "React specific wrapper for BEEQ Design System components",
     "main": "./src/index.js",
     "module": "./src/index.js",
     "types": "./src/index.d.ts",
     "dependencies": {
-        "@beeq/core": "^1.8.0-beta.1"
+        "@beeq/core": "^1.8.0-beta.11",
+        "@stencil/react-output-target": "^0.7.1"
     },
     "peerDependencies": {
         "react": ">=18.0.0",

package/src/components.d.ts

@@ -1,43 +1,291 @@
-import type { JSX } from '@beeq/core/dist/components';
-export declare const BqAccordion: import("react").ForwardRefExoticComponent<JSX.BqAccordion & Omit<import("react").HTMLAttributes<HTMLBqAccordionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqAccordionElement>>;
-export declare const BqAccordionGroup: import("react").ForwardRefExoticComponent<JSX.BqAccordionGroup & Omit<import("react").HTMLAttributes<HTMLBqAccordionGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqAccordionGroupElement>>;
-export declare const BqAlert: import("react").ForwardRefExoticComponent<JSX.BqAlert & Omit<import("react").HTMLAttributes<HTMLBqAlertElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqAlertElement>>;
-export declare const BqAvatar: import("react").ForwardRefExoticComponent<JSX.BqAvatar & Omit<import("react").HTMLAttributes<HTMLBqAvatarElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqAvatarElement>>;
-export declare const BqBadge: import("react").ForwardRefExoticComponent<JSX.BqBadge & Omit<import("react").HTMLAttributes<HTMLBqBadgeElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqBadgeElement>>;
-export declare const BqBreadcrumb: import("react").ForwardRefExoticComponent<JSX.BqBreadcrumb & Omit<import("react").HTMLAttributes<HTMLBqBreadcrumbElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqBreadcrumbElement>>;
-export declare const BqBreadcrumbItem: import("react").ForwardRefExoticComponent<JSX.BqBreadcrumbItem & Omit<import("react").HTMLAttributes<HTMLBqBreadcrumbItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqBreadcrumbItemElement>>;
-export declare const BqButton: import("react").ForwardRefExoticComponent<JSX.BqButton & Omit<import("react").HTMLAttributes<HTMLBqButtonElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqButtonElement>>;
-export declare const BqCard: import("react").ForwardRefExoticComponent<JSX.BqCard & Omit<import("react").HTMLAttributes<HTMLBqCardElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqCardElement>>;
-export declare const BqCheckbox: import("react").ForwardRefExoticComponent<JSX.BqCheckbox & Omit<import("react").HTMLAttributes<HTMLBqCheckboxElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqCheckboxElement>>;
-export declare const BqDatePicker: import("react").ForwardRefExoticComponent<JSX.BqDatePicker & Omit<import("react").HTMLAttributes<HTMLBqDatePickerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqDatePickerElement>>;
-export declare const BqDialog: import("react").ForwardRefExoticComponent<JSX.BqDialog & Omit<import("react").HTMLAttributes<HTMLBqDialogElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqDialogElement>>;
-export declare const BqDivider: import("react").ForwardRefExoticComponent<JSX.BqDivider & Omit<import("react").HTMLAttributes<HTMLBqDividerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqDividerElement>>;
-export declare const BqDrawer: import("react").ForwardRefExoticComponent<JSX.BqDrawer & Omit<import("react").HTMLAttributes<HTMLBqDrawerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqDrawerElement>>;
-export declare const BqDropdown: import("react").ForwardRefExoticComponent<JSX.BqDropdown & Omit<import("react").HTMLAttributes<HTMLBqDropdownElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqDropdownElement>>;
-export declare const BqEmptyState: import("react").ForwardRefExoticComponent<JSX.BqEmptyState & Omit<import("react").HTMLAttributes<HTMLBqEmptyStateElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqEmptyStateElement>>;
-export declare const BqIcon: import("react").ForwardRefExoticComponent<JSX.BqIcon & Omit<import("react").HTMLAttributes<HTMLBqIconElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqIconElement>>;
-export declare const BqInput: import("react").ForwardRefExoticComponent<JSX.BqInput & Omit<import("react").HTMLAttributes<HTMLBqInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqInputElement>>;
-export declare const BqNotification: import("react").ForwardRefExoticComponent<JSX.BqNotification & Omit<import("react").HTMLAttributes<HTMLBqNotificationElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqNotificationElement>>;
-export declare const BqOption: import("react").ForwardRefExoticComponent<JSX.BqOption & Omit<import("react").HTMLAttributes<HTMLBqOptionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqOptionElement>>;
-export declare const BqOptionGroup: import("react").ForwardRefExoticComponent<JSX.BqOptionGroup & Omit<import("react").HTMLAttributes<HTMLBqOptionGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqOptionGroupElement>>;
-export declare const BqOptionList: import("react").ForwardRefExoticComponent<JSX.BqOptionList & Omit<import("react").HTMLAttributes<HTMLBqOptionListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqOptionListElement>>;
-export declare const BqPageTitle: import("react").ForwardRefExoticComponent<JSX.BqPageTitle & Omit<import("react").HTMLAttributes<HTMLBqPageTitleElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqPageTitleElement>>;
-export declare const BqPanel: import("react").ForwardRefExoticComponent<JSX.BqPanel & Omit<import("react").HTMLAttributes<HTMLBqPanelElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqPanelElement>>;
-export declare const BqProgress: import("react").ForwardRefExoticComponent<JSX.BqProgress & Omit<import("react").HTMLAttributes<HTMLBqProgressElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqProgressElement>>;
-export declare const BqRadio: import("react").ForwardRefExoticComponent<JSX.BqRadio & Omit<import("react").HTMLAttributes<HTMLBqRadioElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqRadioElement>>;
-export declare const BqRadioGroup: import("react").ForwardRefExoticComponent<JSX.BqRadioGroup & Omit<import("react").HTMLAttributes<HTMLBqRadioGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqRadioGroupElement>>;
-export declare const BqSelect: import("react").ForwardRefExoticComponent<JSX.BqSelect & Omit<import("react").HTMLAttributes<HTMLBqSelectElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSelectElement>>;
-export declare const BqSideMenu: import("react").ForwardRefExoticComponent<JSX.BqSideMenu & Omit<import("react").HTMLAttributes<HTMLBqSideMenuElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSideMenuElement>>;
-export declare const BqSideMenuItem: import("react").ForwardRefExoticComponent<JSX.BqSideMenuItem & Omit<import("react").HTMLAttributes<HTMLBqSideMenuItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSideMenuItemElement>>;
-export declare const BqSlider: import("react").ForwardRefExoticComponent<JSX.BqSlider & Omit<import("react").HTMLAttributes<HTMLBqSliderElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSliderElement>>;
-export declare const BqSpinner: import("react").ForwardRefExoticComponent<JSX.BqSpinner & Omit<import("react").HTMLAttributes<HTMLBqSpinnerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSpinnerElement>>;
-export declare const BqStatus: import("react").ForwardRefExoticComponent<JSX.BqStatus & Omit<import("react").HTMLAttributes<HTMLBqStatusElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqStatusElement>>;
-export declare const BqStepItem: import("react").ForwardRefExoticComponent<JSX.BqStepItem & Omit<import("react").HTMLAttributes<HTMLBqStepItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqStepItemElement>>;
-export declare const BqSteps: import("react").ForwardRefExoticComponent<JSX.BqSteps & Omit<import("react").HTMLAttributes<HTMLBqStepsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqStepsElement>>;
-export declare const BqSwitch: import("react").ForwardRefExoticComponent<JSX.BqSwitch & Omit<import("react").HTMLAttributes<HTMLBqSwitchElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqSwitchElement>>;
-export declare const BqTab: import("react").ForwardRefExoticComponent<JSX.BqTab & Omit<import("react").HTMLAttributes<HTMLBqTabElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqTabElement>>;
-export declare const BqTabGroup: import("react").ForwardRefExoticComponent<JSX.BqTabGroup & Omit<import("react").HTMLAttributes<HTMLBqTabGroupElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqTabGroupElement>>;
-export declare const BqTag: import("react").ForwardRefExoticComponent<JSX.BqTag & Omit<import("react").HTMLAttributes<HTMLBqTagElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqTagElement>>;
-export declare const BqTextarea: import("react").ForwardRefExoticComponent<JSX.BqTextarea & Omit<import("react").HTMLAttributes<HTMLBqTextareaElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqTextareaElement>>;
-export declare const BqToast: import("react").ForwardRefExoticComponent<JSX.BqToast & Omit<import("react").HTMLAttributes<HTMLBqToastElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqToastElement>>;
-export declare const BqTooltip: import("react").ForwardRefExoticComponent<JSX.BqTooltip & Omit<import("react").HTMLAttributes<HTMLBqTooltipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLBqTooltipElement>>;
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import { type BqAccordionCustomEvent, type BqBreadcrumbCustomEvent, type BqBreadcrumbItemCustomEvent, type BqButtonCustomEvent, type BqCheckboxCustomEvent, type BqDatePickerCustomEvent, type BqInputCustomEvent, type BqOptionCustomEvent, type BqOptionListCustomEvent, type BqRadioCustomEvent, type BqRadioGroupCustomEvent, type BqSelectCustomEvent, type BqSideMenuCustomEvent, type BqSideMenuItemCustomEvent, type BqSliderCustomEvent, type BqStepItemCustomEvent, type BqSwitchCustomEvent, type BqTabCustomEvent, type BqTabGroupCustomEvent, type BqTagCustomEvent, type BqTextareaCustomEvent, type BqToastCustomEvent, type TSliderValue } from "@beeq/core";
+import { BqAccordionGroup as BqAccordionGroupElement } from "@beeq/core/dist/components/bq-accordion-group.js";
+import { BqAccordion as BqAccordionElement } from "@beeq/core/dist/components/bq-accordion.js";
+import { BqAlert as BqAlertElement } from "@beeq/core/dist/components/bq-alert.js";
+import { BqAvatar as BqAvatarElement } from "@beeq/core/dist/components/bq-avatar.js";
+import { BqBadge as BqBadgeElement } from "@beeq/core/dist/components/bq-badge.js";
+import { BqBreadcrumbItem as BqBreadcrumbItemElement } from "@beeq/core/dist/components/bq-breadcrumb-item.js";
+import { BqBreadcrumb as BqBreadcrumbElement } from "@beeq/core/dist/components/bq-breadcrumb.js";
+import { BqButton as BqButtonElement } from "@beeq/core/dist/components/bq-button.js";
+import { BqCard as BqCardElement } from "@beeq/core/dist/components/bq-card.js";
+import { BqCheckbox as BqCheckboxElement } from "@beeq/core/dist/components/bq-checkbox.js";
+import { BqDatePicker as BqDatePickerElement } from "@beeq/core/dist/components/bq-date-picker.js";
+import { BqDialog as BqDialogElement } from "@beeq/core/dist/components/bq-dialog.js";
+import { BqDivider as BqDividerElement } from "@beeq/core/dist/components/bq-divider.js";
+import { BqDrawer as BqDrawerElement } from "@beeq/core/dist/components/bq-drawer.js";
+import { BqDropdown as BqDropdownElement } from "@beeq/core/dist/components/bq-dropdown.js";
+import { BqEmptyState as BqEmptyStateElement } from "@beeq/core/dist/components/bq-empty-state.js";
+import { BqIcon as BqIconElement } from "@beeq/core/dist/components/bq-icon.js";
+import { BqInput as BqInputElement } from "@beeq/core/dist/components/bq-input.js";
+import { BqNotification as BqNotificationElement } from "@beeq/core/dist/components/bq-notification.js";
+import { BqOptionGroup as BqOptionGroupElement } from "@beeq/core/dist/components/bq-option-group.js";
+import { BqOptionList as BqOptionListElement } from "@beeq/core/dist/components/bq-option-list.js";
+import { BqOption as BqOptionElement } from "@beeq/core/dist/components/bq-option.js";
+import { BqPageTitle as BqPageTitleElement } from "@beeq/core/dist/components/bq-page-title.js";
+import { BqPanel as BqPanelElement } from "@beeq/core/dist/components/bq-panel.js";
+import { BqProgress as BqProgressElement } from "@beeq/core/dist/components/bq-progress.js";
+import { BqRadioGroup as BqRadioGroupElement } from "@beeq/core/dist/components/bq-radio-group.js";
+import { BqRadio as BqRadioElement } from "@beeq/core/dist/components/bq-radio.js";
+import { BqSelect as BqSelectElement } from "@beeq/core/dist/components/bq-select.js";
+import { BqSideMenuItem as BqSideMenuItemElement } from "@beeq/core/dist/components/bq-side-menu-item.js";
+import { BqSideMenu as BqSideMenuElement } from "@beeq/core/dist/components/bq-side-menu.js";
+import { BqSlider as BqSliderElement } from "@beeq/core/dist/components/bq-slider.js";
+import { BqSpinner as BqSpinnerElement } from "@beeq/core/dist/components/bq-spinner.js";
+import { BqStatus as BqStatusElement } from "@beeq/core/dist/components/bq-status.js";
+import { BqStepItem as BqStepItemElement } from "@beeq/core/dist/components/bq-step-item.js";
+import { BqSteps as BqStepsElement } from "@beeq/core/dist/components/bq-steps.js";
+import { BqSwitch as BqSwitchElement } from "@beeq/core/dist/components/bq-switch.js";
+import { BqTabGroup as BqTabGroupElement } from "@beeq/core/dist/components/bq-tab-group.js";
+import { BqTab as BqTabElement } from "@beeq/core/dist/components/bq-tab.js";
+import { BqTag as BqTagElement } from "@beeq/core/dist/components/bq-tag.js";
+import { BqTextarea as BqTextareaElement } from "@beeq/core/dist/components/bq-textarea.js";
+import { BqToast as BqToastElement } from "@beeq/core/dist/components/bq-toast.js";
+import { BqTooltip as BqTooltipElement } from "@beeq/core/dist/components/bq-tooltip.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+type BqAccordionEvents = {
+    onBqBlur: EventName<BqAccordionCustomEvent<HTMLBqAccordionElement>>;
+    onBqFocus: EventName<BqAccordionCustomEvent<HTMLBqAccordionElement>>;
+    onBqOpen: EventName<BqAccordionCustomEvent<HTMLBqAccordionElement>>;
+    onBqAfterOpen: EventName<BqAccordionCustomEvent<HTMLBqAccordionElement>>;
+    onBqClose: EventName<BqAccordionCustomEvent<HTMLBqAccordionElement>>;
+    onBqAfterClose: EventName<BqAccordionCustomEvent<HTMLBqAccordionElement>>;
+};
+export declare const BqAccordion: StencilReactComponent<BqAccordionElement, BqAccordionEvents>;
+type BqAccordionGroupEvents = NonNullable<unknown>;
+export declare const BqAccordionGroup: StencilReactComponent<BqAccordionGroupElement, BqAccordionGroupEvents>;
+type BqAlertEvents = {
+    onBqHide: EventName<CustomEvent<any>>;
+    onBqShow: EventName<CustomEvent<any>>;
+    onBqAfterShow: EventName<CustomEvent<any>>;
+    onBqAfterHide: EventName<CustomEvent<any>>;
+};
+export declare const BqAlert: StencilReactComponent<BqAlertElement, BqAlertEvents>;
+type BqAvatarEvents = NonNullable<unknown>;
+export declare const BqAvatar: StencilReactComponent<BqAvatarElement, BqAvatarEvents>;
+type BqBadgeEvents = NonNullable<unknown>;
+export declare const BqBadge: StencilReactComponent<BqBadgeElement, BqBadgeEvents>;
+type BqBreadcrumbEvents = {
+    onBqBreadcrumbBlur: EventName<BqBreadcrumbCustomEvent<HTMLBqBreadcrumbItemElement>>;
+    onBqBreadcrumbFocus: EventName<BqBreadcrumbCustomEvent<HTMLBqBreadcrumbItemElement>>;
+    onBqBreadcrumbClick: EventName<BqBreadcrumbCustomEvent<HTMLBqBreadcrumbItemElement>>;
+};
+export declare const BqBreadcrumb: StencilReactComponent<BqBreadcrumbElement, BqBreadcrumbEvents>;
+type BqBreadcrumbItemEvents = {
+    onBqBlur: EventName<BqBreadcrumbItemCustomEvent<HTMLBqBreadcrumbItemElement>>;
+    onBqFocus: EventName<BqBreadcrumbItemCustomEvent<HTMLBqBreadcrumbItemElement>>;
+    onBqClick: EventName<BqBreadcrumbItemCustomEvent<HTMLBqBreadcrumbItemElement>>;
+};
+export declare const BqBreadcrumbItem: StencilReactComponent<BqBreadcrumbItemElement, BqBreadcrumbItemEvents>;
+type BqButtonEvents = {
+    onBqBlur: EventName<BqButtonCustomEvent<HTMLBqButtonElement>>;
+    onBqFocus: EventName<BqButtonCustomEvent<HTMLBqButtonElement>>;
+    onBqClick: EventName<BqButtonCustomEvent<HTMLBqButtonElement>>;
+};
+export declare const BqButton: StencilReactComponent<BqButtonElement, BqButtonEvents>;
+type BqCardEvents = NonNullable<unknown>;
+export declare const BqCard: StencilReactComponent<BqCardElement, BqCardEvents>;
+type BqCheckboxEvents = {
+    onBqChange: EventName<CustomEvent<{
+        checked: boolean;
+    }>>;
+    onBqFocus: EventName<BqCheckboxCustomEvent<HTMLBqCheckboxElement>>;
+    onBqBlur: EventName<BqCheckboxCustomEvent<HTMLBqCheckboxElement>>;
+};
+export declare const BqCheckbox: StencilReactComponent<BqCheckboxElement, BqCheckboxEvents>;
+type BqDatePickerEvents = {
+    onBqBlur: EventName<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
+    onBqChange: EventName<BqDatePickerCustomEvent<{
+        value: string;
+        el: HTMLBqDatePickerElement;
+    }>>;
+    onBqClear: EventName<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
+    onBqFocus: EventName<BqDatePickerCustomEvent<HTMLBqDatePickerElement>>;
+};
+export declare const BqDatePicker: StencilReactComponent<BqDatePickerElement, BqDatePickerEvents>;
+type BqDialogEvents = {
+    onBqCancel: EventName<CustomEvent<void>>;
+    onBqClose: EventName<CustomEvent<void>>;
+    onBqOpen: EventName<CustomEvent<void>>;
+    onBqAfterOpen: EventName<CustomEvent<void>>;
+    onBqAfterClose: EventName<CustomEvent<void>>;
+};
+export declare const BqDialog: StencilReactComponent<BqDialogElement, BqDialogEvents>;
+type BqDividerEvents = NonNullable<unknown>;
+export declare const BqDivider: StencilReactComponent<BqDividerElement, BqDividerEvents>;
+type BqDrawerEvents = {
+    onBqClose: EventName<CustomEvent<any>>;
+    onBqOpen: EventName<CustomEvent<any>>;
+    onBqAfterOpen: EventName<CustomEvent<any>>;
+    onBqAfterClose: EventName<CustomEvent<any>>;
+};
+export declare const BqDrawer: StencilReactComponent<BqDrawerElement, BqDrawerEvents>;
+type BqDropdownEvents = {
+    onBqOpen: EventName<CustomEvent<{
+        open: boolean;
+    }>>;
+};
+export declare const BqDropdown: StencilReactComponent<BqDropdownElement, BqDropdownEvents>;
+type BqEmptyStateEvents = NonNullable<unknown>;
+export declare const BqEmptyState: StencilReactComponent<BqEmptyStateElement, BqEmptyStateEvents>;
+type BqIconEvents = {
+    onSvgLoaded: EventName<CustomEvent<any>>;
+};
+export declare const BqIcon: StencilReactComponent<BqIconElement, BqIconEvents>;
+type BqInputEvents = {
+    onBqBlur: EventName<BqInputCustomEvent<HTMLBqInputElement>>;
+    onBqChange: EventName<BqInputCustomEvent<{
+        value: string | number | string[];
+        el: HTMLBqInputElement;
+    }>>;
+    onBqClear: EventName<BqInputCustomEvent<HTMLBqInputElement>>;
+    onBqFocus: EventName<BqInputCustomEvent<HTMLBqInputElement>>;
+    onBqInput: EventName<BqInputCustomEvent<{
+        value: string | number | string[];
+        el: HTMLBqInputElement;
+    }>>;
+};
+export declare const BqInput: StencilReactComponent<BqInputElement, BqInputEvents>;
+type BqNotificationEvents = {
+    onBqHide: EventName<CustomEvent<any>>;
+    onBqShow: EventName<CustomEvent<any>>;
+    onBqAfterOpen: EventName<CustomEvent<any>>;
+    onBqAfterClose: EventName<CustomEvent<any>>;
+};
+export declare const BqNotification: StencilReactComponent<BqNotificationElement, BqNotificationEvents>;
+type BqOptionEvents = {
+    onBqBlur: EventName<BqOptionCustomEvent<HTMLBqOptionElement>>;
+    onBqFocus: EventName<BqOptionCustomEvent<HTMLBqOptionElement>>;
+    onBqClick: EventName<BqOptionCustomEvent<HTMLBqOptionElement>>;
+    onBqEnter: EventName<BqOptionCustomEvent<HTMLBqOptionElement>>;
+};
+export declare const BqOption: StencilReactComponent<BqOptionElement, BqOptionEvents>;
+type BqOptionGroupEvents = NonNullable<unknown>;
+export declare const BqOptionGroup: StencilReactComponent<BqOptionGroupElement, BqOptionGroupEvents>;
+type BqOptionListEvents = {
+    onBqSelect: EventName<BqOptionListCustomEvent<{
+        value: string;
+        item: HTMLBqOptionElement;
+    }>>;
+};
+export declare const BqOptionList: StencilReactComponent<BqOptionListElement, BqOptionListEvents>;
+type BqPageTitleEvents = NonNullable<unknown>;
+export declare const BqPageTitle: StencilReactComponent<BqPageTitleElement, BqPageTitleEvents>;
+type BqPanelEvents = NonNullable<unknown>;
+export declare const BqPanel: StencilReactComponent<BqPanelElement, BqPanelEvents>;
+type BqProgressEvents = NonNullable<unknown>;
+export declare const BqProgress: StencilReactComponent<BqProgressElement, BqProgressEvents>;
+type BqRadioEvents = {
+    onBqClick: EventName<BqRadioCustomEvent<HTMLBqRadioElement>>;
+    onBqFocus: EventName<BqRadioCustomEvent<HTMLBqRadioElement>>;
+    onBqBlur: EventName<BqRadioCustomEvent<HTMLBqRadioElement>>;
+    onBqKeyDown: EventName<BqRadioCustomEvent<KeyboardEvent>>;
+};
+export declare const BqRadio: StencilReactComponent<BqRadioElement, BqRadioEvents>;
+type BqRadioGroupEvents = {
+    onBqChange: EventName<BqRadioGroupCustomEvent<{
+        value: string;
+        target: HTMLBqRadioElement;
+    }>>;
+};
+export declare const BqRadioGroup: StencilReactComponent<BqRadioGroupElement, BqRadioGroupEvents>;
+type BqSelectEvents = {
+    onBqBlur: EventName<BqSelectCustomEvent<HTMLBqSelectElement>>;
+    onBqClear: EventName<BqSelectCustomEvent<HTMLBqSelectElement>>;
+    onBqFocus: EventName<BqSelectCustomEvent<HTMLBqSelectElement>>;
+    onBqSelect: EventName<BqSelectCustomEvent<{
+        value: string | number | string[];
+        item: HTMLBqOptionElement;
+    }>>;
+};
+export declare const BqSelect: StencilReactComponent<BqSelectElement, BqSelectEvents>;
+type BqSideMenuEvents = {
+    onBqCollapse: EventName<CustomEvent<{
+        collapse: boolean;
+    }>>;
+    onBqSelect: EventName<BqSideMenuCustomEvent<HTMLBqSideMenuItemElement>>;
+};
+export declare const BqSideMenu: StencilReactComponent<BqSideMenuElement, BqSideMenuEvents>;
+type BqSideMenuItemEvents = {
+    onBqBlur: EventName<BqSideMenuItemCustomEvent<HTMLBqSideMenuItemElement>>;
+    onBqFocus: EventName<BqSideMenuItemCustomEvent<HTMLBqSideMenuItemElement>>;
+    onBqClick: EventName<BqSideMenuItemCustomEvent<HTMLBqSideMenuItemElement>>;
+};
+export declare const BqSideMenuItem: StencilReactComponent<BqSideMenuItemElement, BqSideMenuItemEvents>;
+type BqSliderEvents = {
+    onBqChange: EventName<BqSliderCustomEvent<{
+        value: Exclude<TSliderValue, string>;
+        el: HTMLBqSliderElement;
+    }>>;
+    onBqBlur: EventName<BqSliderCustomEvent<HTMLBqSliderElement>>;
+    onBqFocus: EventName<BqSliderCustomEvent<HTMLBqSliderElement>>;
+};
+export declare const BqSlider: StencilReactComponent<BqSliderElement, BqSliderEvents>;
+type BqSpinnerEvents = NonNullable<unknown>;
+export declare const BqSpinner: StencilReactComponent<BqSpinnerElement, BqSpinnerEvents>;
+type BqStatusEvents = NonNullable<unknown>;
+export declare const BqStatus: StencilReactComponent<BqStatusElement, BqStatusEvents>;
+type BqStepItemEvents = {
+    onBqClick: EventName<BqStepItemCustomEvent<{
+        target: HTMLBqStepItemElement;
+        value: string;
+    }>>;
+};
+export declare const BqStepItem: StencilReactComponent<BqStepItemElement, BqStepItemEvents>;
+type BqStepsEvents = NonNullable<unknown>;
+export declare const BqSteps: StencilReactComponent<BqStepsElement, BqStepsEvents>;
+type BqSwitchEvents = {
+    onBqChange: EventName<CustomEvent<{
+        checked: boolean;
+    }>>;
+    onBqFocus: EventName<BqSwitchCustomEvent<HTMLBqSwitchElement>>;
+    onBqBlur: EventName<BqSwitchCustomEvent<HTMLBqSwitchElement>>;
+};
+export declare const BqSwitch: StencilReactComponent<BqSwitchElement, BqSwitchEvents>;
+type BqTabEvents = {
+    onBqClick: EventName<BqTabCustomEvent<HTMLBqTabElement>>;
+    onBqFocus: EventName<BqTabCustomEvent<HTMLBqTabElement>>;
+    onBqBlur: EventName<BqTabCustomEvent<HTMLBqTabElement>>;
+    onBqKeyDown: EventName<BqTabCustomEvent<KeyboardEvent>>;
+};
+export declare const BqTab: StencilReactComponent<BqTabElement, BqTabEvents>;
+type BqTabGroupEvents = {
+    onBqChange: EventName<BqTabGroupCustomEvent<{
+        target: HTMLBqTabElement;
+        value: string;
+    }>>;
+};
+export declare const BqTabGroup: StencilReactComponent<BqTabGroupElement, BqTabGroupEvents>;
+type BqTagEvents = {
+    onBqClose: EventName<CustomEvent<any>>;
+    onBqOpen: EventName<CustomEvent<any>>;
+    onBqBlur: EventName<BqTagCustomEvent<HTMLBqTagElement>>;
+    onBqClick: EventName<BqTagCustomEvent<HTMLBqTagElement>>;
+    onBqFocus: EventName<BqTagCustomEvent<HTMLBqTagElement>>;
+};
+export declare const BqTag: StencilReactComponent<BqTagElement, BqTagEvents>;
+type BqTextareaEvents = {
+    onBqBlur: EventName<BqTextareaCustomEvent<HTMLBqTextareaElement>>;
+    onBqChange: EventName<BqTextareaCustomEvent<{
+        value: string;
+        el: HTMLBqTextareaElement;
+    }>>;
+    onBqClear: EventName<BqTextareaCustomEvent<HTMLBqTextareaElement>>;
+    onBqFocus: EventName<BqTextareaCustomEvent<HTMLBqTextareaElement>>;
+    onBqInput: EventName<BqTextareaCustomEvent<{
+        value: string;
+        el: HTMLBqTextareaElement;
+    }>>;
+};
+export declare const BqTextarea: StencilReactComponent<BqTextareaElement, BqTextareaEvents>;
+type BqToastEvents = {
+    onBqHide: EventName<BqToastCustomEvent<HTMLBqToastElement>>;
+    onBqShow: EventName<BqToastCustomEvent<HTMLBqToastElement>>;
+};
+export declare const BqToast: StencilReactComponent<BqToastElement, BqToastEvents>;
+type BqTooltipEvents = NonNullable<unknown>;
+export declare const BqTooltip: StencilReactComponent<BqTooltipElement, BqTooltipEvents>;
+export {};