interface borderRadiusProps { /** * The border radius value to apply to the element. */ $borderRadius: number; /** * The width of the base of the triangle, used to determine the clip-path dimensions. */ $triangleBaseWidth: number; /** * The horizontal offset of the triangle, adjusting its placement on the element. */ $triangleOffset: `- ${number}px` | `+ ${number}px`; /** * The horizontal position of the apex of the triangle relative to the element, influencing where the triangle is placed. */ $trianglePosition: number; } /** * Generates a CSS border-radius value based on triangle geometry to smooth corners adjacent to the triangle. * This function dynamically calculates border-radius for elements that need to visually integrate with a triangle shape, * ensuring that the curvature of the corners complements the triangle's placement and dimensions. * * @param props The styling props. * @param props.$borderRadius The border radius value to apply to the element. * @param props.$triangleBaseWidth The width of the triangle's base, influencing the border radius calculation. * @param props.$triangleOffset The horizontal offset of the triangle, adjusting its placement on the element. * @param props.$trianglePosition The position of the triangle along the horizontal axis, which affects the radius on specific corners. * @returns A string representing the CSS value for the border-radius property, adjusted for the triangle's position and width. */ export declare const borderRadius: ({ $borderRadius, $triangleBaseWidth, $triangleOffset, $trianglePosition }: borderRadiusProps) => string; interface insetProps { /** * A boolean flag indicating whether the triangle is positioned at the top of the element. */ $isTop: boolean; /** * The height of the triangle, impacting how deep the clip goes into the element. */ $triangleHeight: number; } /** * Calculates an inset shadow or border to visually connect or separate elements from a triangle's base. * This utility is useful for adding shadows or borders that need to account for a visual offset created by a triangle shape, * particularly in CSS designs involving tooltips or arrows pointing at content. * * @param props The styling props. * @param props.$isTop A boolean flag indicating whether the triangle is positioned at the top of the element. * @param props.$triangleHeight The height of the triangle, used to set the depth of the inset. * @returns A string representing the CSS value for the inset property, adjusting for the triangle's height to create visual depth or separation. */ export declare const inset: ({ $isTop, $triangleHeight }: insetProps) => string; interface clipPathProps { /** * A boolean flag indicating whether the triangle is positioned at the top of the element. */ $isTop: boolean; /** * The width of the base of the triangle, used to determine the clip-path dimensions. */ $triangleBaseWidth: number; /** * The height of the triangle, impacting how deep the clip goes into the element. */ $triangleHeight: number; /** * The horizontal offset of the triangle, influencing its exact placement. */ $triangleOffset: `- ${number}px` | `+ ${number}px`; /** * The horizontal position of the apex of the triangle relative to the element, influencing where the triangle is placed. */ $trianglePosition: number; } /** * Defines a clipping path for an element to create a triangular cutout effect. * This function provides a way to clip an HTML element into a specific shape based on a triangle's dimensions and position, * which can be used for creating dynamic, visually engaging designs such as tooltips or directional indicators. * * @param props The styling props. * @param props.$isTop A boolean flag indicating whether the triangle is positioned at the top of the element. * @param props.$triangleBaseWidth The width of the triangle's base, which dictates the width of the cutout. * @param props.$triangleHeight The height of the triangle, affecting the depth of the cutout. * @param props.$triangleOffset The horizontal offset of the triangle, adjusting its placement on the element. * @param props.$trianglePosition The horizontal position of the triangle, which determines where the cutout starts. * @returns A string representing the CSS value for the clip-path property, forming a polygon shape that fits the triangle's specified parameters. */ export declare const clipPath: ({ $isTop, $triangleBaseWidth, $triangleHeight, $triangleOffset, $trianglePosition }: clipPathProps) => string; export {};