@celke/kole-react 0.1.0 → 0.2.0

package/dist/components/Preferencias/Preferencias.d.ts

@@ -1,22 +1,39 @@
 import { type ReactNode } from 'react';
-export type Tema = 'claro' | 'escuro';
+/** `sistema` = segue o modo do sistema operacional, inclusive quando ele muda com a página aberta. */
+export type Tema = 'claro' | 'escuro' | 'sistema';
 export type Densidade = 'compacta' | 'confortavel' | 'espacosa';
 export interface Preferencias {
     tema: Tema;
+    /** O tema que está na tela: com `sistema`, o do sistema operacional agora. */
     escuro: boolean;
     densidade: Densidade;
     definirTema: (t: Tema) => void;
     alternarTema: () => void;
     definirDensidade: (d: Densidade) => void;
 }
+/**
+ * Script para o `<head>` que aplica tema e densidade ANTES da primeira pintura.
+ * Sem ele, o `ProvedorPreferencias` só aplica no primeiro efeito, e quem salvou
+ * o tema escuro vê a página clara piscar ao abrir. Lê a mesma chave do
+ * `localStorage`; passe o mesmo `temaInicial`/`densidadeInicial` do provedor.
+ *
+ * SSR: `<script dangerouslySetInnerHTML={{ __html: scriptTemaInicial() }} />`.
+ * Vite/HTML estático: o README traz o script pronto para colar no index.html.
+ */
+export declare function scriptTemaInicial({ temaInicial, densidadeInicial }?: {
+    temaInicial?: Tema;
+    densidadeInicial?: Densidade;
+}): string;
 export interface ProvedorPreferenciasProps {
     children: ReactNode;
+    /** Tema enquanto a pessoa não escolhe outro. Padrão: `sistema`. */
     temaInicial?: Tema;
     densidadeInicial?: Densidade;
 }
 /**
- * Tema (claro/escuro) e densidade, lembrados no navegador. Aplica
- * `data-theme` no <html> e a classe de densidade no <body>.
+ * Tema (claro/escuro/sistema) e densidade, lembrados no navegador. Aplica
+ * `data-theme` (`light`/`dark`/`system`) no <html> e a classe de densidade no
+ * <body>. Para não piscar ao abrir, use também o `scriptTemaInicial` no <head>.
  */
 export declare function ProvedorPreferencias({ children, temaInicial, densidadeInicial }: ProvedorPreferenciasProps): import("react").JSX.Element;
 export declare function usePreferencias(): Preferencias;