import { BorderRadiusTokenType, BreakpointsTokenType, BackgroundColorsTokenType, BorderColorsTokenType, BordersTokenType, ShadowsTokenType, SpacingTokenType, TypographyTokenType } from './design-token.type';
import { Breakpoints } from '../constants/tokens/breakpoints';
import { Placements, FlexDirections, Alignments, GridJustifyItems, BoxDisplay, VegaNativeEventName, CssStates } from '../constants/ui';
import { HTMLStencilElement } from '../stencil-public-runtime';
import { GridColumns, GridRows } from '../constants/tokens/tailwind.extend';
import { JSX as LocalJSX } from '../components';
import { VegaEATriggerStrategy } from '../helpers/slimmers/element-appender/trigger-strategies/trigger-strategy.interface';
import { Nullable } from './general';
/**
 * Represents the portion of the browser viewport currently visible.
 */
export type BrowserVisibleArea = {
    /**
     * Distance from the top edge of the viewport in pixels.
     */
    top: number;
    /**
     * Distance from the bottom edge of the viewport in pixels.
     */
    bottom: number;
    /**
     * X-coordinate of the viewport center point.
     */
    centerX: number;
    /**
     * Y-coordinate of the viewport center point.
     */
    centerY: number;
    /**
     * Height of the visible viewport area in pixels.
     */
    height: number;
    /**
     * Width of the visible viewport area in pixels.
     */
    width: number;
    /**
     * Distance from the left edge of the viewport in pixels.
     */
    left: number;
    /**
     * Distance from the right edge of the viewport in pixels.
     */
    right: number;
};
/**
 * Cardinal directions used when specifying spacing.
 */
export type SpacingDirection = 'top' | 'bottom' | 'left' | 'right' | 'x' | 'y';
/**
 * Spacing values keyed by direction when using directional padding/margin.
 */
export type DirectionalSpacingType = {
    [key in SpacingDirection]?: SpacingTokenType;
};
/**
 * Color mode options for token-based theming.
 */
export type TokenMode = 'dark' | 'light';
/**
 * Allows a value to be responsive, either fixed or specified per breakpoint.
 */
export type ResponsiveType<T> = {
    [key in BreakpointsTokenType]?: T;
} | T;
/**
 * Side(s) of an element to which border radius can be applied.
 */
export type BorderRadiusDirection = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
/**
 * Border radius values keyed by specific directions.
 */
export type DirectionalBorderRadiusType = {
    [key in BorderRadiusDirection]?: BorderRadiusTokenType;
};
/**
 * Input shape used internally for responsive style management helpers.
 */
export interface ManagedResponsiveScopeInput {
    /**
     * Padding configuration value.
     */
    padding: PaddingType;
    /**
     * Margin configuration value.
     */
    margin: MarginType;
    /**
     * Gap between flex/grid items.
     */
    gap: GapType;
    /**
     * Grid column span value.
     */
    gridColumn: GridColumnsType;
    /**
     * Grid row span value.
     */
    gridRow: GridRowsType;
    /**
     * Grid justify-items configuration.
     */
    gridJustifyItems: GridJustifyItemsType;
    /**
     * Size dimension value.
     */
    size: SizeType;
    /**
     * X/Y translation offset.
     */
    translocation: TranslocationType;
    /**
     * Whether display property should be applied.
     */
    display: boolean;
    /**
     * Flex direction configuration.
     */
    flexDirection: FlexDirectionType;
    /**
     * Flex align-items configuration.
     */
    flexAlignItem: FlexAlignItemType;
    /**
     * Flex justify-content configuration.
     */
    flexJustifyContent: FlexJustifyContentType;
    /**
     * Flex wrap behavior configuration.
     */
    flexWrap: FlexWrapType;
    /**
     * Box display type configuration.
     */
    boxDisplay: BoxDisplayType;
    /**
     * Maximum height dimension value.
     */
    maxHeight: MaxHeightType;
    /**
     * Width or height dimension value.
     */
    widthAndHeight: WidthType | HeightType;
    /**
     * Border radius corner configuration.
     */
    corners: CornersType;
    /**
     * Text alignment configuration.
     */
    textAlign: TextAlignType;
    /**
     * Padding style value.
     */
    paddingStyle: PaddingType;
    /**
     * Margin style value.
     */
    marginStyle: MarginType;
    /**
     * Corner radius style value.
     */
    cornersStyle: CornersType;
}
/**
 * Output produced by responsive style management helpers.
 */
export interface ManagedResponsiveScopeOutput {
    /**
     * Computed padding CSS value.
     */
    padding: string;
    /**
     * Computed margin CSS value.
     */
    margin: string;
    /**
     * Computed gap CSS value.
     */
    gap: string;
    /**
     * Computed grid-column CSS value.
     */
    gridColumn: string;
    /**
     * Computed grid-row CSS value.
     */
    gridRow: string;
    /**
     * Computed justify-items CSS value.
     */
    gridJustifyItems: string;
    /**
     * Computed size value (numeric or string).
     */
    size: number | string;
    /**
     * Computed translation offset.
     */
    translocation: TranslocationType;
    /**
     * Computed display CSS value.
     */
    display: string;
    /**
     * Computed flex-direction CSS value.
     */
    flexDirection: string;
    /**
     * Computed align-items CSS value.
     */
    flexAlignItem: string;
    /**
     * Computed justify-content CSS value.
     */
    flexJustifyContent: string;
    /**
     * Computed flex-wrap CSS value.
     */
    flexWrap: string;
    /**
     * Computed display type CSS value.
     */
    boxDisplay: string;
    /**
     * Computed max-height CSS value.
     */
    maxHeight: string | number;
    /**
     * Computed width/height CSS value.
     */
    widthAndHeight: string;
    /**
     * Computed border-radius CSS value.
     */
    corners: string;
    /**
     * Computed text-align CSS value.
     */
    textAlign: string;
    /**
     * Computed padding style CSS value.
     */
    paddingStyle: string;
    /**
     * Computed margin style CSS value.
     */
    marginStyle: string;
    /**
     * Computed corners style CSS value.
     */
    cornersStyle: string;
}
/**
 * @deprecated
 * please use {@link ManagedResponsiveScopeInput} and {@link ManagedResponsiveScopeOutput} instead.
 */
/**
 * @deprecated use ManagedResponsiveScopeInput/Output instead.
 */
export type ResponsiveScope = PaddingType | MarginType | GapType | SizeType | GridColumnsType | GridRowsType | TranslocationType | boolean | TypographyTokenType;
/**
 * @deprecated
 * please use {@link ManagedResponsiveScopeInput} and {@link ManagedResponsiveScopeOutput} instead.
 */
/**
 * @deprecated list of responsive scope flags (use ManagedResponsiveScopeInput instead).
 */
export type ResponsiveScopeFlag = 'padding' | 'margin' | 'gap' | 'grid-column' | 'grid-row' | 'size' | 'translocation' | 'display';
/**
 * @deprecated
 * please use {@link ManagedResponsiveScopeInput} and {@link ManagedResponsiveScopeOutput} instead.
 */
/**
 * @deprecated result type for responsive scope calculation.
 */
export type ResponsiveResultScope = string | number | TranslocationType;
/**
 * Padding can be directional or a single token value.
 */
export type PaddingType = DirectionalSpacingType | SpacingTokenType;
/**
 * Margin can be directional or a single token value.
 */
export type DirectionalMarginType = {
    [key in SpacingDirection]?: MarginValueType;
};
/**
 * Margin value can be a spacing token or 'auto' for centering.
 */
export type MarginValueType = SpacingTokenType | 'auto';
/**
 * Margin can be directional or a single token value.
 */
export type MarginType = DirectionalMarginType | MarginValueType;
/**
 * Corner radius may be specified directionally or with a token.
 */
export type CornersType = DirectionalBorderRadiusType | BorderRadiusTokenType;
/**
 * Gap between elements, either directional or token.
 */
export type GapType = Pick<DirectionalSpacingType, 'x' | 'y'> | SpacingTokenType;
/**
 * Size value may be a number or percentage string.
 */
export type SizeType = number | `${number}%`;
/**
 * Grid column count values from tailwind extension.
 */
export type GridColumnsType = typeof GridColumns[number];
/**
 * Grid row count values from tailwind extension.
 */
export type GridRowsType = typeof GridRows[number];
/**
 * Grid justify-items options.
 */
export type GridJustifyItemsType = typeof GridJustifyItems[number];
/**
 * Flex container direction values.
 */
export type FlexDirectionType = typeof FlexDirections[number];
/**
 * Options for align-items in flex containers.
 */
export type FlexAlignItemType = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
/**
 * Options for justify-content in flex containers.
 */
export type FlexJustifyContentType = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
/**
 * Flex wrap behavior options.
 */
export type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse';
/**
 * Device type enumeration for responsive design breakpoints.
 */
export declare enum DeviceType {
    /**
     * Tablet device type.
     */
    TABLET = "tablet",
    /**
     * Mobile device type.
     */
    MOBILE = "mobile",
    /**
     * Desktop device type.
     */
    DESKTOP = "desktop"
}
/**
 * Keys of the breakpoint set for prefixing utilities.
 */
export type BreakpointsForPrefixType = keyof typeof Breakpoints;
/**
 * Position information for an element, possibly including placement/ alignment.
 */
export type ElementPositionBox = {
    /**
     * Placement position configuration.
     */
    placement?: Nullable<PlacementType>;
    /**
     * Position alignment configuration.
     */
    alignment?: Nullable<PositionAlignmentType>;
    /**
     * Distance from top edge in pixels.
     */
    top: number;
    /**
     * Distance from left edge in pixels.
     */
    left: number;
};
/**
 * Bounding box dimensions and position for an element.
 */
export type ElementBoundBox = {
    /**
     * Element width in pixels.
     */
    width: number;
    /**
     * Element height in pixels.
     */
    height: number;
    /**
     * Distance from top edge in pixels.
     */
    top: number;
    /**
     * Distance from left edge in pixels.
     */
    left: number;
};
/**
 * Scrollable dimension measurements.
 */
export type ElementScrollDimension = {
    /**
     * Scrollable width in pixels.
     */
    width: number;
    /**
     * Scrollable height in pixels.
     */
    height: number;
};
/**
 * Allowed placement values for positioned elements.
 */
export type PlacementType = typeof Placements[number];
/**
 * Alignment options used with PlacementType.
 */
export type PositionAlignmentType = typeof Alignments[number];
/**
 * Represents an X/Y offset value.
 */
export type TranslocationType = {
    /**
     * Horizontal (X-axis) offset in pixels.
     */
    X: number;
    /**
     * Vertical (Y-axis) offset in pixels.
     */
    Y: number;
};
/**
 * Payload sent to observers of accordion component events.
 */
export type AccordionObserverPayload = {
    /**
     * Unique identifier of the accordion group.
     */
    groupId: string;
    /**
     * Reference to the accordion component element.
     */
    element: HTMLVegaAccordionElement;
};
/**
 * Utility type to strip HTMLStencilElement properties from a component interface.
 */
export type VegaComponentInterface<T extends HTMLStencilElement> = Omit<T, keyof HTMLStencilElement>;
/**
 * Simple RGB color representation.
 */
export type RGBType = {
    /**
     * Red channel value (0-255).
     */
    r: number;
    /**
     * Green channel value (0-255).
     */
    g: number;
    /**
     * Blue channel value (0-255).
     */
    b: number;
};
/**
 * Supported keyboard event code values.
 */
export type KeyboardCodeType = 'Tab' | 'Enter' | 'Backspace' | 'Escape' | 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'KeyZ';
/**
 * Display property options for box-like layout elements.
 */
export type BoxDisplayType = typeof BoxDisplay[number];
/**
 * Placement configuration for appended elements (single or array).
 */
export type ElementAppenderPlacementType = PlacementType | PlacementType[];
/**
 * Alignment configuration for appended elements (single or array).
 */
export type ElementAppenderAlignmentType = PositionAlignmentType | PositionAlignmentType[];
/**
 * Width value may be numeric, string, or spacing token.
 */
export type WidthType = number | string | SpacingTokenType;
/**
 * Height value may be numeric, string, or spacing token.
 */
export type HeightType = number | string | SpacingTokenType;
/**
 * Minimum height value, numeric/string/spacing token.
 */
export type MinHeightType = number | string | SpacingTokenType;
/**
 * Maximum height value, numeric/string/spacing token.
 */
export type MaxHeightType = number | string | SpacingTokenType;
/**
 * Union of valid Vega component tag names.
 */
export type VegaComponentName = keyof LocalJSX.IntrinsicElements;
/**
 * Native event names recognized by Vega components.
 */
export type VegaNativeEventNameType = typeof VegaNativeEventName[number];
/**
 * CSS state class names used for styling.
 */
export type CssStatesType = typeof CssStates[number];
/**
 * Utility type to represent a state-aware value map.
 */
export type StateVariantType<T, K extends CssStatesType> = T | Record<K, T>;
/**
 * Input structure for managed state styling helpers.
 */
export interface ManagedStateScopeInput {
    /**
     * Border color token value.
     */
    borderColor: BorderColorsTokenType;
    /**
     * Border style token value.
     */
    border: BordersTokenType;
    /**
     * Background color token value.
     */
    backgroundColor: BackgroundColorsTokenType;
    /**
     * Shadow effect token value.
     */
    shadow: ShadowsTokenType;
}
/**
 * Icon alignment options.
 */
export type IconAlignType = 'left' | 'right';
/**
 * Border style options.
 */
export type BorderStyleType = 'solid' | 'dashed' | 'dotted' | 'double' | 'none';
/**
 * Text alignment values.
 */
export type TextAlignType = 'start' | 'end' | 'left' | 'right' | 'center' | 'justify';
/**
 * Props forwarded to the underlying flex element.
 */
export type VegaFlexProps = Partial<Pick<HTMLVegaFlexElement, 'gap' | 'direction' | 'alignItems' | 'justifyContent' | 'margin'>>;
/**
 * - click: means the dropdown show/hide by click, it also listen global area click. example: VegaPopover
 * - hover: means the dropdown show/hide by hover, it also listen global area click. example: VegaDropdown VegaAppHeaderButton
 * - none: means element appender not listens any event, you should control the dropdown show/hide in component. example: VegaDatePicker
 * - VegaEATriggerStrategy: means element appender use custom trigger strategy to control show/hide behavior.
 */
export type VegaEATriggerType = 'click' | 'hover' | 'none' | VegaEATriggerStrategy;
/**
 * Event types that can trigger element appender visibility changes and state updates.
 */
export type VegaEAEventType = 'target-click' | 'target-mouseenter' | 'target-mouseleave' | 'element-mouseenter' | 'element-mouseleave' | 'click-outside';
