vagaro-tw-components/dist/index.d.ts

Tailwind CSS React TypeScript components for Vagaro

import React, { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes } from 'react';
import { ClassValue } from 'clsx';

type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
type ButtonSize = 'sm' | 'md' | 'lg';
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: ButtonVariant;
    size?: ButtonSize;
    fullWidth?: boolean;
    loading?: boolean;
}
interface CardProps extends HTMLAttributes<HTMLDivElement> {
    variant?: 'default' | 'bordered' | 'shadow';
    padding?: 'none' | 'sm' | 'md' | 'lg';
}
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    label?: string;
    error?: string;
    helperText?: string;
    fullWidth?: boolean;
}
type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
    variant?: BadgeVariant;
    size?: 'sm' | 'md' | 'lg';
}

declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

interface PageBannerProps {
    /**
     * The text content to display in the banner
     */
    text: string;
    /**
     * The URL to link to
     */
    href: string;
    /**
     * Optional custom link component (e.g., Next.js Link)
     * If not provided, uses a standard anchor tag
     */
    linkComponent?: React.ElementType;
    /**
     * Additional props to pass to the link component
     */
    linkProps?: Record<string, any>;
    /**
     * Whether to open the link in a new tab
     * @default true
     */
    openInNewTab?: boolean;
}
declare const PageBanner: React.FC<PageBannerProps>;

interface RightArrowProps {
    /**
     * CSS class for styling the SVG
     */
    fillClass?: string;
    /**
     * Width of the SVG icon
     * @default '1em'
     */
    width?: string | number;
    /**
     * Height of the SVG icon
     * @default '1em'
     */
    height?: string | number;
    /**
     * Accessible label for the icon
     * @default 'Right arrow icon'
     */
    ariaLabel?: string;
}
declare const RightArrow: React.FC<RightArrowProps>;

declare function cn(...inputs: ClassValue[]): string;

export { Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Input, type InputProps, PageBanner, RightArrow, cn };