import React from 'react'; import type { ToProp, AsElementType, LinkTheme, OtherHTMLAttributes } from '@instructure/shared-types'; import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion'; import type { ViewOwnProps } from '@instructure/ui-view/latest'; import { Renderable } from '@instructure/shared-types'; type LinkOwnProps = { /** * The text and/or icon displayed by the link */ children: React.ReactNode; /** * Sets the link's `href` attribute */ href?: string; /** * Designates Link's text color to accommodate light and dark backgrounds */ color?: 'link' | 'link-inverse'; /** * Provides a reference to the underlying HTML element */ elementRef?: (element: Element | null) => void; /** * The element type to render as (will default to `` if href is provided) */ as?: AsElementType; /** * The ARIA role of the element. */ role?: string; /** * If the Link has an onClick handler but is not a button element, * force ARIA role to be "button". */ forceButtonRole?: boolean; /** * Determines if the link is enabled or disabled */ interaction?: 'enabled' | 'disabled'; /** * 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="small auto large"`. */ margin?: Spacing; /** * Add an SVG icon to the Link. Do not add icons directly as * children. * When using Lucide icons, Link will automatically pass the appropriate size prop based on the Link's size. */ renderIcon?: Renderable; /** * Place the icon before or after the text in the Link. */ iconPlacement?: 'start' | 'end'; /** * Set the CSS display property of the Link element. 'auto' sets no display property. */ display?: 'auto' | 'block' | 'inline-block' | 'flex' | 'inline-flex'; /** * Fires when the Link loses focus */ onBlur?: (event: React.FocusEvent) => void; /** * Fires when the Link is clicked */ onClick?: (event: React.MouseEvent) => void; /** * Fires when the Link gains focus */ onFocus?: (event: React.FocusEvent) => void; /** * Fires when the Link is hovered */ onMouseEnter?: (event: React.MouseEvent) => void; /** * Sets pre-defined values for the component to achieve specific roles for the component * - `inline` * - `standalone` * * __Deprecated values:__ * - `inline-small` * - `standalone-small` */ variant?: 'inline' | 'standalone' | 'inline-small' | 'standalone-small'; /** * Sets the size of the link (font size, line height, and icon gap) */ size?: 'small' | 'medium' | 'large'; }; export type LinkStyleProps = { containsTruncateText: boolean; hasVisibleChildren: boolean; }; type PropKeys = keyof LinkOwnProps; type AllowedPropKeys = Readonly>; type LinkState = { hasFocus: boolean; }; type LinkProps = LinkOwnProps & WithStyleProps & OtherHTMLAttributes & ToProp; type LinkStyle = ComponentStyle<'link' | 'icon'>; declare const allowedProps: AllowedPropKeys; export type { LinkProps, LinkState, LinkStyle }; export { allowedProps }; //# sourceMappingURL=props.d.ts.map