import { Component } from 'vue';
export interface DefineElementOptions {
    /**
     * List of attributes to observe.
     * Changes to these attributes will automatically update Vue props.
     * Example: ['label', 'is-active']
     */
    attributes?: string[];
    /**
     * List of events the Vue component emits.
     * These will be forwarded as standard DOM CustomEvents.
     * Example: ['change', 'update:modelValue']
     */
    emits?: string[];
}
/**
 * Registers a Vue component as a standard Web Component (Custom Element).
 * This allows the component to be used in React, Angular, CMSs, or plain HTML.
 *
 * Key Features:
 * - Attribute & Property Sync: Automatically maps HTML attributes to Vue props
 * - Complex Data Support: Use `.props` property for objects/arrays/functions
 * - Event Forwarding: Vue events become standard DOM CustomEvents
 * - Slot Bridge: Initial HTML content becomes Vue default slot
 * - Light DOM: No Shadow DOM, ensuring Tailwind CSS works perfectly
 *
 * @example
 * ```typescript
 * import { defineVueElement } from '@u-devtools/kit/web-components';
 * import { UButton } from '@u-devtools/ui';
 *
 * // Define a Vue component as a Web Component
 * defineVueElement('u-button', UButton, {
 *   attributes: ['label', 'variant', 'icon', 'disabled'],
 *   emits: ['click', 'update:modelValue'],
 * });
 *
 * // Now you can use it in HTML
 * // <u-button label="Click Me" variant="primary"></u-button>
 *
 * // Or in React
 * // <u-button label="Click Me" variant="primary" />
 *
 * // Example: Using props property for complex data
 * const button = document.querySelector('u-button') as any;
 * button.props = {
 *   onClick: () => console.log('Clicked!'),
 *   customData: { id: 1, name: 'test' },
 * };
 *
 * // Example: Listening to events
 * button.addEventListener('click', (e: CustomEvent) => {
 *   console.log('Button clicked:', e.detail);
 * });
 * ```
 *
 * @example
 * ```ts
 * import { defineVueElement } from '@u-devtools/kit';
 * import { UButton } from '@u-devtools/ui';
 *
 * defineVueElement('u-button', UButton, {
 *   attributes: ['label', 'variant', 'icon'],
 *   emits: ['click']
 * });
 * ```
 *
 * ```html
 * <u-button label="Click Me" variant="primary"></u-button>
 *
 * <script>
 *   const btn = document.querySelector('u-button');
 *   btn.addEventListener('click', (e) => console.log('Clicked!', e.detail));
 *   btn.props = { onClick: () => console.log('Programmatic handler') };
 * </script>
 * ```
 */
export declare function defineVueElement(tagName: string, VueComponent: Component, options?: DefineElementOptions): void;
/**
 * Helper to register multiple Vue components as Web Components
 *
 * @example
 * ```ts
 * import { defineVueElements } from '@u-devtools/kit';
 *
 * defineVueElements([
 *   { tagName: 'u-button', component: UButton, options: { attributes: ['label'], emits: ['click'] } },
 *   { tagName: 'u-card', component: UCard, options: { attributes: ['title'] } },
 * ]);
 * ```
 */
export declare function defineVueElements(definitions: Array<{
    tagName: string;
    component: Component;
    options?: DefineElementOptions;
}>): void;
//# sourceMappingURL=web-components.d.ts.map