export interface ViewProps extends Pick, BorderProps, CornerProps, IdProps, SizingProps, SpacingProps, VisibilityProps { /** * Changes the display of the component. * * * `inline` the component starts on the same line as preceding inline content and allows subsequent content to continue on the same line. * * `block` the component starts on its own new line and fills its parent. * * `auto` resets the component to its initial value. The actual value depends on the component and context. * * `none` hides the component and removes it from the accessibility tree, making it invisible to screen readers. * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display * * @defaultValue 'auto' */ display?: MaybeResponsiveConditionalStyle; /** * Sets the opacity of the View. The opacity will be applied to the background as well as all * the children of the View. Use carefully as this could decrease the contrast ratio between * the background and foreground elements, resulting in unreadable and inaccessible text. */ opacity?: Opacity; /** * A label that describes the purpose or contents of the element. When set, * it will be announced to buyers using assistive technologies and will * provide them with more context. */ accessibilityLabel?: string; /** * Sets the semantic meaning of the component’s content. When set, * the role will be used by assistive technologies to help buyers * navigate the page. * * * For example: * * - In an HTML host a `['listItem', 'separator']` tuple will render: `

` * * - In an HTML host a `listItem` string will render: `

` */ accessibilityRole?: ViewLikeAccessibilityRole; /** * Changes how the `View` is positioned. When setting `position`, set each axis only once. * * ``` * // Allowed; sets the `block` and `inline` axes once each * ``` * * ``` * // Allowed; sets the `inline` and `block` axes once each * ``` * * ``` * // Not allowed; sets the `block` axis twice * ``` * * ``` * // Not allowed; sets the `inline` axis twice * ``` */ position?: MaybeResponsiveConditionalStyle; /** * Specifies a two-dimensional translation of the View. */ translate?: MaybeResponsiveConditionalStyle; /** * Position children along the cross axis */ blockAlignment?: MaybeResponsiveConditionalStyle< Extract >; /** * Position children along the main axis */ inlineAlignment?: MaybeResponsiveConditionalStyle; /** * Adjust the inline size. * * `fill`: takes all the available space. */ inlineSize?: MaybeResponsiveConditionalStyle<'fill'>; /** * Sets the overflow behavior of the element. * * `hidden`: clips the content when it is larger than the element’s container. * The element will not be scrollable and the users will not be able * to access the clipped content by dragging or using a scroll wheel. * * `visible`: the content that extends beyond the element’s container is visible. * * @default 'visible' */ overflow?: 'hidden' | 'visible'; }