import React from 'react';
import type { Cursor } from '@instructure/shared-types';
import type { AsElementType, OtherHTMLAttributes } from '@instructure/shared-types';
import type { WithStyleProps, Spacing, Shadow, Stacking, ComponentStyle, StyleObject } from '@instructure/emotion';
import type { NewComponentTypes } from '@instructure/ui-themes';
import type { CSSShorthandValue } from '@instructure/shared-types';
type BorderColor = string | 'transparent' | 'primary' | 'secondary' | 'brand' | 'info' | 'success' | 'warning' | 'alert' | 'danger' | 'strongColor' | 'visualSeparator' | 'accentAsh' | 'accentAurora' | 'accentBlue' | 'accentGreen' | 'accentGrey' | 'accentHoney' | 'accentOrange' | 'accentPlum' | 'accentRed' | 'accentSea' | 'accentSky' | 'accentStone' | 'accentViolet';
type ViewOwnProps = {
    /**
     * The element to render as the component root, `span` by default
     */
    as?: AsElementType;
    /**
     * provides a reference to the underlying html element
     */
    elementRef?: (element: HTMLElement | null) => void;
    /**
     * By default the display prop is 'auto', meaning it takes on the
     * display rules of the html element it's rendered as (see `as` prop).
     *
     * `inherit`, `initial`, `revert`, `revert-layer` and `unset` are the global
     * CSS values (see the
     * [MDN `display` reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display)).
     */
    display?: 'auto' | 'inline' | 'block' | 'inline-block' | 'flex' | 'inline-flex' | 'contents' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
    overflowX?: 'auto' | 'hidden' | 'visible';
    overflowY?: 'auto' | 'hidden' | 'visible';
    height?: string | number;
    width?: string | number;
    maxHeight?: string | number;
    maxWidth?: string | number;
    minHeight?: string | number;
    minWidth?: string | number;
    /**
     * The children to render inside the <View />
     */
    children?: React.ReactNode;
    /**
     * Designates the text alignment within the `<View />`
     */
    textAlign?: 'start' | 'center' | 'end';
    /**
     * Sets the color of the View border.
     * Accepts a color string value (e.g., "#FFFFFF", "red") or one of the predefined theme color options.
     */
    borderColor?: BorderColor;
    /**
     * Designates the background style of the `<View />`
     */
    background?: 'transparent' | 'primary' | 'secondary' | 'primary-inverse' | 'brand' | 'info' | 'alert' | 'success' | 'danger' | 'warning';
    /**
     * Specify a value for the CSS position property. Use `relative` if `focusable` will be true.
     */
    position?: 'static' | 'absolute' | 'relative' | 'sticky' | 'fixed';
    /**
     * The `left` CSS property in left-to-right interfaces. Will not do anything if `position === "static"`.
     */
    insetInlineStart?: string;
    /**
     * The `right` CSS property in left-to-right interfaces. Will not do anything if `position === "static"`.
     */
    insetInlineEnd?: string;
    /**
     * The `top` CSS property. Will not do anything if `position === "static"`.
     */
    insetBlockStart?: string;
    /**
     * The `bottom` CSS property. Will not do anything if `position === "static"`.
     */
    insetBlockEnd?: string;
    /**
     * Manually control if the `View` should display a focus outline.
     *
     * When left `undefined` (which is the default) the focus outline will display
     * automatically if the `View` is focusable and receives focus.
     */
    withFocusOutline?: boolean;
    /**
     * Determines whether the focus outline displays offset or inset from the focused View
     */
    focusPosition?: 'offset' | 'inset';
    /**
     * Determines the color of the focus outline
     */
    focusColor?: 'info' | 'inverse' | 'success' | 'danger';
    /**
     * Determines if the focus ring should animate when it appears
     */
    shouldAnimateFocus?: boolean;
    /**
     * Activate a dotted outline around the component to make building your
     * layout easier
     */
    withVisualDebug?: boolean;
    dir?: 'ltr' | 'rtl';
    /**
     * Valid values are `0`, `none`, `auto`, and Spacing token values,
     * see https://instructure.design/layout-spacing. Apply these values via
     * familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
     */
    margin?: Spacing;
    /**
     * Valid values are `0`, `none`, and Spacing token values,
     * see https://instructure.design/layout-spacing. Apply these values via
     * familiar CSS-like shorthand. For example, `padding="general.spaceMd general.spaceLg"`.
     */
    padding?: Spacing;
    /**
     * Accepts the familiar CSS shorthand to designate border widths corresponding
     * to edges
     */
    borderWidth?: CSSShorthandValue<'0' | 'none' | 'small' | 'medium' | 'large' | 'sm' | 'md' | 'lg'>;
    /**
     * Accepts `small`, `medium`, `large`, `circle`, and `pill`. Border radius can be
     * assigned to individual corners in CSS shorthand style (e.g., `"medium large none pill"`).
     * Also accepts valid CSS length values like `1rem` or `12px`
     */
    borderRadius?: string;
    /**
     * Controls the shadow depth for the `<View />`
     */
    shadow?: Shadow;
    /**
     * Controls the z-index depth for the `<View />`
     */
    stacking?: Stacking;
    /**
     * Specify a mouse cursor to use when hovering over the `<View />`
     */
    cursor?: Cursor;
    /**
     * Sets what a browser does when reaching the boundary of a scrolling area.
     * Valid values are `auto`, `contain`, `none`.
     */
    overscrollBehavior?: 'auto' | 'contain' | 'none';
    /**
     * Display the focus ring when any of the descendants is focused.
     * (uses the [:focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)
     * CSS selector)
     */
    focusWithin?: boolean;
};
type PropKeys = keyof ViewOwnProps;
type ViewProps = ViewOwnProps & WithStyleProps<ReturnType<NewComponentTypes['View']>, ViewStyle> & OtherHTMLAttributes<ViewOwnProps>;
type AllowedPropKeys = Readonly<Array<PropKeys>>;
type ViewStyle = ComponentStyle<'view'> & {
    inlineStyles: StyleObject;
};
declare const allowedProps: AllowedPropKeys;
export { allowedProps };
export type { ViewProps, ViewOwnProps, ViewStyle, BorderColor };
//# sourceMappingURL=props.d.ts.map