/**
 * Web Component factory and registry.
 *
 * @module bquery/component
 */
import type { ComponentClass, ComponentDefinition, ComponentSignals } from './types';
/**
 * Creates a custom element class for a component definition.
 *
 * This is useful when you want to extend or register the class manually
 * (e.g. with different tag names in tests or custom registries).
 *
 * @template TProps - Type of the component's props
 * @template TState - Type of the component's internal state. When provided,
 * `definition.state` is required, `render({ state })` is strongly typed, and
 * returned instances expose typed `getState()` / `setState()` helpers.
 * @param tagName - The custom element tag name (used for diagnostics)
 * @param definition - The component configuration
 */
export declare function defineComponent<TProps extends Record<string, unknown>, TSignals extends ComponentSignals = Record<string, never>>(tagName: string, definition: ComponentDefinition<TProps, undefined, TSignals>): ComponentClass<undefined>;
export declare function defineComponent<TProps extends Record<string, unknown>, TState extends Record<string, unknown>, TSignals extends ComponentSignals = Record<string, never>>(tagName: string, definition: ComponentDefinition<TProps, TState, TSignals>): ComponentClass<TState>;
/**
 * Defines and registers a custom Web Component.
 *
 * This function creates a new custom element with the given tag name
 * and configuration. The component uses Shadow DOM for encapsulation
 * and automatically re-renders when observed attributes change.
 *
 * @template TProps - Type of the component's props
 * @template TState - Type of the component's internal state. When provided,
 * `definition.state` is required and lifecycle hooks receive typed state
 * helpers via `this.getState()` / `this.setState()`.
 * @param tagName - The custom element tag name (must contain a hyphen)
 * @param definition - The component configuration
 *
 * @example
 * ```ts
 * component<{ start: number }, { count: number }>('counter-button', {
 *   props: {
 *     start: { type: Number, default: 0 },
 *   },
 *   state: { count: 0 },
 *   styles: `
 *     button { padding: 0.5rem 1rem; }
 *   `,
 *   connected() {
 *     // Use event delegation on shadow root so handler survives re-renders
 *     const handleClick = (event: Event) => {
 *       const target = event.target as HTMLElement | null;
 *       if (target?.matches('button')) {
 *         this.setState('count', this.getState('count') + 1);
 *       }
 *     };
 *     this.shadowRoot?.addEventListener('click', handleClick);
 *     // Store handler for cleanup
 *     (this as any)._handleClick = handleClick;
 *   },
 *   disconnected() {
 *     // Clean up event listener to prevent memory leaks
 *     const handleClick = (this as any)._handleClick;
 *     if (handleClick) {
 *       this.shadowRoot?.removeEventListener('click', handleClick);
 *     }
 *   },
 *   render({ props, state }) {
 *     return html`
 *       <button>
 *         Count: ${state.count}
 *       </button>
 *     `;
 *   },
 * });
 * ```
 */
export declare function component<TProps extends Record<string, unknown>, TSignals extends ComponentSignals = Record<string, never>>(tagName: string, definition: ComponentDefinition<TProps, undefined, TSignals>): void;
export declare function component<TProps extends Record<string, unknown>, TState extends Record<string, unknown>, TSignals extends ComponentSignals = Record<string, never>>(tagName: string, definition: ComponentDefinition<TProps, TState, TSignals>): void;
//# sourceMappingURL=component.d.ts.map