@sinchsmb/ui-kit/dist/types/components/Counter/Counter.d.ts

UI kit for SinchSMB frontend

/// <reference types="react" />
import { CounterBlockProps } from './components/CounterBlock';
import { CounterButtonProps } from './components/CounterButton';
import { CounterLinkProps } from './components/CounterLink';
import { CounterType } from './constants';
export type CounterProps = {
    /**
     * Determines the component modification
     * Depending on this, the component can require additional props.
     */
    type?: CounterType;
} & ((CounterBlockProps & {
    type?: CounterType.Default;
}) | (CounterButtonProps & {
    type: CounterType.Button;
}) | (CounterLinkProps & {
    type: CounterType.Link;
}));
/**
 * Component that can be used in UI to display some counter information
 *
 * ```tsx
 * import { Counter, CounterColor, IconGlyph} from 'ui-kit';
 *
 * <Counter icon={IconGlyph.InfoSolid} label="Label" value={10} color={CounterColor.Green} />
 * ```
 *
 * ## Colors
 *
 * {@link Counter} support five colors:
 *
 * | Color                       | Example                                                    |
 * | --------------------------- | ---------------------------------------------------------- |
 * | {@link CounterColor.Blue}   | <Story id="components-counter--blue" noCanvas />   |
 * | {@link CounterColor.Green}  | <Story id="components-counter--green" noCanvas />  |
 * | {@link CounterColor.Gray}   | <Story id="components-counter--gray" noCanvas />   |
 * | {@link CounterColor.Orange} | <Story id="components-counter--orange" noCanvas /> |
 * | {@link CounterColor.Red}    | <Story id="components-counter--red" noCanvas />    |
 *
 * ### Interactive
 *
 * {@link Counter} can be represented as `<button>` or as `<a>` elements.
 *
 * #### Buttons
 *
 * {@link Counter} can be clickable.
 *
 * <Story id="components-counter--as-button" />
 *
 * ```tsx
 * import { Counter, CounterColor, IconGlyph} from 'ui-kit';
 *
 * <Counter icon={IconGlyph.InfoSolid} label="Label" value={0} color={CounterColor.Gray} type={CounterType.Button} onClick={handleClick} />
 * ```
 *
 * #### Links
 *
 * {@link Counter} can be represented as link.
 *
 * <Story id="components-counter--as-link" />
 *
 * ```tsx
 * import { Counter, CounterColor, IconGlyph} from 'ui-kit';
 *
 * <Counter icon={IconGlyph.InfoSolid} label="Label" value={0} color={CounterColor.Gray} type={CounterType.Link} to="/dashboard" />
 * ```
 */
export declare const Counter: import("react").ForwardRefExoticComponent<CounterProps & import("react").RefAttributes<HTMLElement>>;