UNPKG

@codeworker.br/govbr-tw-react

Version:

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

37 lines (36 loc) 1.96 kB
import React from "react"; import { type VariantProps } from "class-variance-authority"; /** * Skeleton – placeholder carregando, inspirado no shadcn/ui. * * Agora com props para customizar a **cor que pulsa** e a **animação**: * - `toneClassName`: classes Tailwind para a base/cor do skeleton (ex.: `bg-emerald-200`). * - `animateClassName`: classes Tailwind para a animação (ex.: `animate-pulse`, `motion-safe:animate-[pulse_1.5s_ease_infinite]`). * * Dica: se quiser somente trocar a cor, basta `toneClassName`. Se quiser * customizar a animação, passe `animate={false}` e use apenas `animateClassName`. */ declare const skeletonVariants: (props?: ({ theme?: "dark" | "light" | "normal" | null | undefined; animate?: boolean | null | undefined; radius?: "sm" | "md" | "lg" | "none" | "full" | null | undefined; } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string; export type SkeletonProps = { className?: string; /** Cor/base do skeleton (ex.: bg-emerald-200, bg-zinc-200, bg-white/20) */ toneClassName?: string; /** Classe(s) de animação (ex.: animate-pulse) */ animateClassName?: string; } & VariantProps<typeof skeletonVariants> & React.HTMLAttributes<HTMLDivElement>; declare const Skeleton: React.ForwardRefExoticComponent<{ className?: string | undefined; /** Cor/base do skeleton (ex.: bg-emerald-200, bg-zinc-200, bg-white/20) */ toneClassName?: string | undefined; /** Classe(s) de animação (ex.: animate-pulse) */ animateClassName?: string | undefined; } & VariantProps<(props?: ({ theme?: "dark" | "light" | "normal" | null | undefined; animate?: boolean | null | undefined; radius?: "sm" | "md" | "lg" | "none" | "full" | null | undefined; } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>; export default Skeleton;