dgz-ui/dist/types/ui/badge/badge.d.ts

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript

import * as React from 'react';
import { type VariantProps } from 'class-variance-authority';
/**
 * Badge variants generated using class-variance-authority (CVA).
 * Controls the appearance of the Badge component through various props:
 *
 * @property {'default' | 'status' | 'indicator' | 'icon'} type - Determines the role and style behavior.
 * @property {'default' | 'gray' | 'blue' | 'cyan' | 'green' | 'lime' | 'orange' | 'red' | 'purple' | 'indigo' |
 *   'default-outlined' | 'gray-outlined' | 'blue-outlined' | 'cyan-outlined' | 'green-outlined' | 'lime-outlined' |
 *   'orange-outlined' | 'red-outlined' | 'purple-outlined' | 'indigo-outlined'} variant - The color scheme and outlined style.
 * @property {'sm' | 'lg'} size - The size of the badge.
 * @property {'default' | 'full'} rounded - The border-radius of the badge.
 */
export declare const badgeVariants: (props?: ({
    type?: "default" | "status" | "icon" | "indicator" | null | undefined;
    variant?: "default" | "gray" | "blue" | "cyan" | "green" | "lime" | "orange" | "red" | "purple" | "indigo" | "default-outlined" | "gray-outlined" | "blue-outlined" | "cyan-outlined" | "green-outlined" | "lime-outlined" | "orange-outlined" | "red-outlined" | "purple-outlined" | "indigo-outlined" | null | undefined;
    size?: "lg" | "sm" | null | undefined;
    rounded?: "default" | "full" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
 * Props for the Badge component.
 * Extends native HTML div props and adds styling variants.
 */
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
}
/**
 * Badge is a UI component used to display status indicators, labels, or counters.
 *
 * @component
 * @param {BadgeProps} props - Props for customizing the badge.
 * @param {string} [props.className] - Additional Tailwind CSS classes.
 * @param {'default' | 'status' | 'indicator' | 'icon'} [props.type] - Type of badge.
 * @param {'default' | 'gray' | 'blue' | 'cyan' | 'green' | 'lime' | 'orange' | 'red' | 'purple' | 'indigo' |
 *   'default-outlined' | 'gray-outlined' | 'blue-outlined' | 'cyan-outlined' | 'green-outlined' | 'lime-outlined' |
 *   'orange-outlined' | 'red-outlined' | 'purple-outlined' | 'indigo-outlined'} [props.variant] - Color scheme of badge.
 * @param {'sm' | 'lg'} [props.size] - Size of the badge.
 * @param {'default' | 'full'} [props.rounded] - Border radius style.
 * @param {React.HTMLAttributes<HTMLDivElement>} props - All other native div props.
 * @returns {JSX.Element} Rendered badge component.
 */
export declare function Badge({ className, variant, rounded, type, size, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
export declare namespace Badge {
    var displayName: string;
}
//# sourceMappingURL=badge.d.ts.map