@spaced-out/ui-design-system/lib/components/Shimmer/Shimmer.d.ts

Sense UI components library

import * as React from 'react';
import type { Flow } from 'flow-to-typescript-codemod';
type ClassNames = Readonly<{
    wrapper?: string;
}>;
export declare const SHIMMER_TYPES: Readonly<{
    text: "text";
    rounded: "rounded";
    circular: "circular";
    rectangular: "rectangular";
}>;
export declare const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP: Readonly<{
    text: "4px";
    rounded: "12px";
    circular: "50%";
    rectangular: "0px";
}>;
export type ShimmerType = (typeof SHIMMER_TYPES)[keyof typeof SHIMMER_TYPES];
export interface ShimmerProps {
    classNames?: ClassNames;
    show?: boolean;
    type?: ShimmerType;
    width?: number | string;
    height?: number | string;
    borderRadius?: number | string;
    children?: React.ReactNode;
    testId?: string;
}
export interface ShimmerWrapperProps {
    children?: React.ReactNode;
    testId?: string;
}
/**
 * Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
 * This solves a very annoying problem with out text components where the display prop is set to flex.
 * Genesis assumes that every element is flexible for simplicity and for text text shimmers to work in use cases
 * where text wraps across multiple lines, we need to wrap the shimmer in a span element.
 * to avoid the misuse where consumers use there own / other block level components, we have this wrapper.
 * This would ensure the layout remains same even when you toggle the shimmer to show your actual content
 * @param {React.Node} children - The children to be rendered
 */
export declare const ShimmerWrapper: ({ children, testId, }: ShimmerWrapperProps) => React.ReactElement<React.ComponentProps<"span">>;
export declare const Shimmer: Flow.AbstractComponent<ShimmerProps, HTMLSpanElement>;
type KPIShimmerClassNames = Readonly<{
    wrapper?: string;
    icon?: string;
    text?: string;
}>;
export interface KPIShimmerProps {
    textWidth?: number | string;
    hasTopContent?: boolean;
    hasMiddleContent?: boolean;
    hasBottomContent?: boolean;
    hasIcon?: boolean;
    classNames?: KPIShimmerClassNames;
    testId?: string;
}
export declare const KPIShimmer: ({ textWidth, hasBottomContent, hasIcon, hasTopContent, hasMiddleContent, classNames, testId, }: KPIShimmerProps) => React.JSX.Element;
export {};
//# sourceMappingURL=Shimmer.d.ts.map