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 declare 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 declare type SpacingDirection = 'top' | 'bottom' | 'left' | 'right' | 'x' | 'y';
/**
 * Spacing values keyed by direction when using directional padding/margin.
 */
export declare type DirectionalSpacingType = {
  [key in SpacingDirection]?: SpacingTokenType;
};
/**
 * Color mode options for token-based theming.
 */
export declare type TokenMode = 'dark' | 'light';
/**
 * Allows a value to be responsive, either fixed or specified per breakpoint.
 */
export declare type ResponsiveType<T> = {
  [key in BreakpointsTokenType]?: T;
} | T;
/**
 * Side(s) of an element to which border radius can be applied.
 */
export declare type BorderRadiusDirection = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
/**
 * Border radius values keyed by specific directions.
 */
export declare 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 declare 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 declare 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 declare type ResponsiveResultScope = string | number | TranslocationType;
/**
 * Padding can be directional or a single token value.
 */
export declare type PaddingType = DirectionalSpacingType | SpacingTokenType;
/**
 * Margin can be directional or a single token value.
 */
export declare type DirectionalMarginType = {
  [key in SpacingDirection]?: MarginValueType;
};
/**
 * Margin value can be a spacing token or 'auto' for centering.
 */
export declare type MarginValueType = SpacingTokenType | 'auto';
/**
 * Margin can be directional or a single token value.
 */
export declare type MarginType = DirectionalMarginType | MarginValueType;
/**
 * Corner radius may be specified directionally or with a token.
 */
export declare type CornersType = DirectionalBorderRadiusType | BorderRadiusTokenType;
/**
 * Gap between elements, either directional or token.
 */
export declare type GapType = Pick<DirectionalSpacingType, 'x' | 'y'> | SpacingTokenType;
/**
 * Size value may be a number or percentage string.
 */
export declare type SizeType = number | `${number}%`;
/**
 * Grid column count values from tailwind extension.
 */
export declare type GridColumnsType = typeof GridColumns[number];
/**
 * Grid row count values from tailwind extension.
 */
export declare type GridRowsType = typeof GridRows[number];
/**
 * Grid justify-items options.
 */
export declare type GridJustifyItemsType = typeof GridJustifyItems[number];
/**
 * Flex container direction values.
 */
export declare type FlexDirectionType = typeof FlexDirections[number];
/**
 * Options for align-items in flex containers.
 */
export declare type FlexAlignItemType = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
/**
 * Options for justify-content in flex containers.
 */
export declare type FlexJustifyContentType = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
/**
 * Flex wrap behavior options.
 */
export declare 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 declare type BreakpointsForPrefixType = keyof typeof Breakpoints;
/**
 * Position information for an element, possibly including placement/ alignment.
 */
export declare 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 declare 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 declare type ElementScrollDimension = {
  /**
   * Scrollable width in pixels.
   */
  width: number;
  /**
   * Scrollable height in pixels.
   */
  height: number;
};
/**
 * Allowed placement values for positioned elements.
 */
export declare type PlacementType = typeof Placements[number];
/**
 * Alignment options used with PlacementType.
 */
export declare type PositionAlignmentType = typeof Alignments[number];
/**
 * Represents an X/Y offset value.
 */
export declare 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 declare 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 declare type VegaComponentInterface<T extends HTMLStencilElement> = Omit<T, keyof HTMLStencilElement>;
/**
 * Simple RGB color representation.
 */
export declare 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 declare type KeyboardCodeType = 'Tab' | 'Enter' | 'Backspace' | 'Escape' | 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'KeyZ';
/**
 * Display property options for box-like layout elements.
 */
export declare type BoxDisplayType = typeof BoxDisplay[number];
/**
 * Placement configuration for appended elements (single or array).
 */
export declare type ElementAppenderPlacementType = PlacementType | PlacementType[];
/**
 * Alignment configuration for appended elements (single or array).
 */
export declare type ElementAppenderAlignmentType = PositionAlignmentType | PositionAlignmentType[];
/**
 * Width value may be numeric, string, or spacing token.
 */
export declare type WidthType = number | string | SpacingTokenType;
/**
 * Height value may be numeric, string, or spacing token.
 */
export declare type HeightType = number | string | SpacingTokenType;
/**
 * Minimum height value, numeric/string/spacing token.
 */
export declare type MinHeightType = number | string | SpacingTokenType;
/**
 * Maximum height value, numeric/string/spacing token.
 */
export declare type MaxHeightType = number | string | SpacingTokenType;
/**
 * Union of valid Vega component tag names.
 */
export declare type VegaComponentName = keyof LocalJSX.IntrinsicElements;
/**
 * Native event names recognized by Vega components.
 */
export declare type VegaNativeEventNameType = typeof VegaNativeEventName[number];
/**
 * CSS state class names used for styling.
 */
export declare type CssStatesType = typeof CssStates[number];
/**
 * Utility type to represent a state-aware value map.
 */
export declare 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 declare type IconAlignType = 'left' | 'right';
/**
 * Border style options.
 */
export declare type BorderStyleType = 'solid' | 'dashed' | 'dotted' | 'double' | 'none';
/**
 * Text alignment values.
 */
export declare type TextAlignType = 'start' | 'end' | 'left' | 'right' | 'center' | 'justify';
/**
 * Props forwarded to the underlying flex element.
 */
export declare 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 declare type VegaEATriggerType = 'click' | 'hover' | 'none' | VegaEATriggerStrategy;
/**
 * Event types that can trigger element appender visibility changes and state updates.
 */
export declare type VegaEAEventType = 'target-click' | 'target-mouseenter' | 'target-mouseleave' | 'element-mouseenter' | 'element-mouseleave' | 'click-outside';
/**
 * Status values representing different phases of a drag-and-drop interaction, used in drag-and-drop event payloads.
 */
export declare type DragDropEventStatus = 'start' | 'drag' | 'enter' | 'leave' | 'over' | 'drop' | 'end';
/**
 * Options provided in the payload of a drag-and-drop event,
 *    detailing the source and target elements and their indices during the interaction.
 */
export declare type DragDropEventOptions = {
  /**
   * Index of the item being dragged from its original position.
   */
  fromIndex: number;
  /**
   * Reference to the HTML element being dragged.
   */
  fromItem: HTMLElement;
  /**
   * Index of the target position where the item is being dragged over or dropped to. May be null if not applicable.
   */
  toIndex: Nullable<number>;
  /**
   * Reference to the target HTML element being dragged over or dropped onto. May be null if not applicable.
   */
  toItem: Nullable<HTMLElement>;
};
/**
 * Payload structure for events emitted during drag-and-drop interactions,
 *    containing the current status of the interaction and relevant options about the source and target elements.
 */
export declare type DragDropEventPayload = {
  /**
   * Current status of the drag-and-drop interaction, indicating the phase of the operation (e.g., 'start', 'drag', 'enter', etc.).
   */
  status: DragDropEventStatus;
  /**
   * Detailed options about the drag-and-drop event, including source and target element information and their respective indices.
   */
  options: DragDropEventOptions;
};
