tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
50 lines (49 loc) • 3.56 kB
TypeScript
/**
* `ArrowButton` is a customizable button component that displays an arrow.
* The button can have various shapes, directions, and colors, and it rotates on hover.
* The button's appearance and behavior can be controlled using props or the theme provider.
*
* @param {object} props - The properties to customize the `ArrowButton` component.
* @param {'topleft' | 'topright' | 'bottomleft' | 'bottomright' | 'left' | 'right' | 'top' | 'bottom'} [props.initialDirection='topright'] - The initial direction of the arrow.
* @param {'topleft' | 'topright' | 'bottomleft' | 'bottomright' | 'left' | 'right' | 'top' | 'bottom'} [props.finalDirection='right'] - The final direction of the arrow after rotation.
* @param {string} [props.backgroundColor] - Background color of the button (overrides theme.backgroundColor).
* @param {string} [props.arrowFillColor] - The fill color of the arrow (overrides theme.textColor).
* @param {string} [props.arrowStrokeColor] - The stroke (border) color of the arrow (overrides theme.borderColor).
* @param {string} [props.borderColor] - Border color of the button (overrides theme.borderColor).
* @param {string} [props.shadowColor] - Shadow color of the button (overrides theme.shadowColor).
* @param {number} [props.size] - The size of the button. Both width and height are set to this value (overrides theme.spacingfactor).
* @param {number} [props.cornerRadius] - Custom border radius for the button. Overrides theme.cornerRadius if provided.
* @param {string} [props.borderWidth] - Border width for the button (overrides theme.borderWidth).
* @param {string} [props.borderStyle] - Border style for the button (overrides theme.borderStyle).
* @param {string} [props.transitionDuration] - Transition duration for the button (overrides theme.transitionDuration).
* @param {string} [props.shadowOffsetX] - Horizontal shadow offset (overrides theme.shadowOffsetX).
* @param {string} [props.shadowOffsetY] - Vertical shadow offset (overrides theme.shadowOffsetY).
* @param {string} [props.shadowBlur] - Shadow blur radius (overrides theme.shadowBlur).
* @param {string} [props.shadowSpread] - Shadow spread radius (overrides theme.shadowSpread).
* @param {boolean} [props.shadowInset] - Whether the shadow is inset (overrides theme.shadowInset).
* @param {Function} [props.onClick] - A function that will be called when the button is clicked.
*
* @returns {JSX.Element} A styled button element with an arrow inside.
*/
export interface ArrowButtonProps {
initialDirection?: "topleft" | "topright" | "bottomleft" | "bottomright" | "left" | "right" | "top" | "bottom";
finalDirection?: "topleft" | "topright" | "bottomleft" | "bottomright" | "left" | "right" | "top" | "bottom";
backgroundColor?: string;
arrowFillColor?: string;
arrowStrokeColor?: string;
borderColor?: string;
shadowColor?: string;
size?: number;
borderWidth?: string;
borderStyle?: string;
transitionDuration?: string;
shadowOffsetX?: string;
shadowOffsetY?: string;
shadowBlur?: string;
shadowSpread?: string;
shadowInset?: boolean;
onClick?: () => void;
cornerRadius?: number;
}
declare const ArrowButton: ({ initialDirection, finalDirection, backgroundColor, shadowColor, borderColor, size, onClick, arrowFillColor, arrowStrokeColor, cornerRadius, borderWidth, borderStyle, transitionDuration, shadowOffsetX, shadowOffsetY, shadowBlur, shadowSpread, shadowInset, }: ArrowButtonProps) => import("react/jsx-runtime").JSX.Element;
export default ArrowButton;