import { StateOptions } from '../core';
/**
 * DeviceType
 * @public
 * @group Device
 */
export type DeviceType = 'desktop' | 'tablet' | 'phone';
/**
 * Decorator that subscribes to the current device type from the device service.
 *
 * This decorator automatically updates the decorated property whenever the device type
 * changes (typically when the viewport is resized). The device type indicates roughly
 * how big the viewport is, not what actual device is being used. It's the recommended
 * approach over manual subscriptions as it handles subscription lifecycle automatically.
 *
 * @param options - Configuration for state transformation and filtering via {@link StateOptions}
 * @returns A PropertyDecorator that sets up automatic subscription to device type
 *
 * @remarks
 * Subscribes to: Device service
 *
 * Updates: The decorated property with {@link DeviceType} ('desktop', 'tablet', or 'phone')
 *
 * Viewport-aware: Automatically updates when viewport size changes
 *
 * Lifecycle: Automatically subscribes in `connectedCallback` and
 * unsubscribes in `disconnectedCallback`
 *
 * @example Basic usage with Stencil component
 * ```tsx
 * import { h, State } from '@stencil/core';
 * import { DeviceType, SelectDevice } from '@limetech/lime-web-components';
 *
 * class MyComponent {
 *     // The device service holds an object, so the type is read from `type`
 *     @State()
 *     @SelectDevice()
 *     private deviceState: { type: DeviceType };
 *
 *     public render() {
 *         return (
 *             <div class={`layout-${this.deviceState?.type}`}>
 *                 <p>Viewing on: {this.deviceState?.type}</p>
 *             </div>
 *         );
 *     }
 * }
 * ```
 *
 * @example Conditional rendering based on device
 * ```tsx
 * import { h, State } from '@stencil/core';
 * import { DeviceType, SelectDevice } from '@limetech/lime-web-components';
 *
 * class MyComponent {
 *     // `map` picks the device type out of the state, so the property holds the
 *     // plain string instead of the whole state object
 *     @State()
 *     @SelectDevice({ map: [(state: { type: DeviceType }) => state.type] })
 *     private device: DeviceType;
 *
 *     public render() {
 *         if (this.device === 'phone') {
 *             return <button class="hamburger-menu">Menu</button>;
 *         }
 *
 *         return (
 *             <nav class="full-menu">
 *                 <a href="/home">Home</a>
 *                 <a href="/about">About</a>
 *                 <a href="/contact">Contact</a>
 *             </nav>
 *         );
 *     }
 * }
 * ```
 *
 * @public
 * @group Device
 */
export declare function SelectDevice(options?: StateOptions): PropertyDecorator;