@payfit/unity-components
Version:
88 lines (87 loc) • 2.92 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { AriaAttributes } from 'react';
declare const pill: import('tailwind-variants').TVReturnType<{
variant: {
critical: string;
info: string[];
neutral: string;
};
shape: {
circle: string;
pill: string;
};
isVisible: {
true: string;
false: string;
};
}, undefined, "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong", {
variant: {
critical: string;
info: string[];
neutral: string;
};
shape: {
circle: string;
pill: string;
};
isVisible: {
true: string;
false: string;
};
}, undefined, import('tailwind-variants').TVReturnType<{
variant: {
critical: string;
info: string[];
neutral: string;
};
shape: {
circle: string;
pill: string;
};
isVisible: {
true: string;
false: string;
};
}, undefined, "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong", unknown, unknown, undefined>>;
export type PillProps = Partial<Pick<HTMLDivElement, 'id'>> & Required<Pick<AriaAttributes, 'aria-label'>> & Pick<AriaAttributes, 'aria-details' | 'aria-describedby' | 'aria-live'> & {
/** The value to be displayed inside the Pill */
value: number;
/**
* The variant of the Pill, determining its color scheme
* @default 'critical'
*/
variant?: VariantProps<typeof pill>['variant'];
/**
* Determines if the Pill is visible or not
* @default true
*/
isVisible?: VariantProps<typeof pill>['isVisible'];
/**
* The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
* @default 2
*/
maxDigits?: number;
};
/**
* The Pill component displays a count of notifications or other numerical values.
*/
declare const Pill: import('react').ForwardRefExoticComponent<Partial<Pick<HTMLDivElement, "id">> & Required<Pick<AriaAttributes, "aria-label">> & Pick<AriaAttributes, "aria-describedby" | "aria-details" | "aria-live"> & {
/** The value to be displayed inside the Pill */
value: number;
/**
* The variant of the Pill, determining its color scheme
* @default 'critical'
*/
variant?: VariantProps<typeof pill>["variant"];
/**
* Determines if the Pill is visible or not
* @default true
*/
isVisible?: VariantProps<typeof pill>["isVisible"];
/**
* The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
* @default 2
*/
maxDigits?: number;
} & import('react').RefAttributes<HTMLSpanElement>>;
export { Pill };