@gyramais/gyra-design 0.2.50 → 0.2.53

package/dist/emails/balance-sheet-finalized/components/Card/Card.d.ts

@@ -15,6 +15,12 @@ type CardProps = {
     media?: React.ReactNode;
     disabled?: boolean;
     loading?: boolean;
+    /**
+     * Placeholder exibido no lugar do conteudo enquanto `loading`. O padrao e um
+     * skeleton de linhas de texto; passe um skeleton com a forma do conteudo real
+     * (grafico, tabela, lista) quando isso ajudar a evitar o pulo de layout.
+     */
+    loadingContent?: React.ReactNode;
     collapsible?: boolean;
     defaultCollapsed?: boolean;
     collapsed?: boolean;
@@ -23,5 +29,5 @@ type CardProps = {
     headerContent?: React.ReactNode;
     children?: React.ReactNode;
 };
-declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
+declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, loadingContent, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
 export { Card };

package/dist/emails/balance-sheet-finalized/components/Empty/Empty.d.ts

@@ -3,8 +3,25 @@ import "./index.css";
 type EmptyProps = {
     id?: string;
     className?: string;
+    /**
+     * Ilustracao opcional. Use SO em zero state de pagina ou area inteira, do
+     * tipo "primeiro uso, ainda nao ha nada aqui", onde ela vem acompanhada de
+     * um titulo e de uma acao.
+     *
+     * Dentro de card ou de tabela de seção o padrao e' texto puro, sem grafico:
+     * a mesma ilustracao repetida dezenas de vezes na mesma pagina vira ruido e
+     * compete com o dado que importa. E' o que Stripe e Linear fazem em tabela.
+     */
     icon?: React.ReactNode;
     text?: string;
 };
-declare const Empty: ({ id, className, icon, text, }: EmptyProps) => React.JSX.Element;
+/**
+ * Estado vazio: diz que nao ha nada ali, sem roubar a atencao do que ha.
+ *
+ * Discreto de proposito, em texto secundario. Uma lista vazia raramente e' o
+ * assunto da tela, e num relatorio de credito ela costuma ate ser boa noticia
+ * ("nenhuma sanção encontrada"), entao nao deve parecer erro nem falha de
+ * carregamento.
+ */
+declare const Empty: ({ id, className, icon, text }: EmptyProps) => React.JSX.Element;
 export { Empty };

package/dist/emails/balance-sheet-finalized/components/Rail/Rail.d.ts

@@ -30,7 +30,12 @@ type RailProps = {
     steps: Array<RailStepData>;
     /** Rotulo acessivel da lista. Default: "Esteira". */
     ariaLabel?: string;
-    /** Etapa em foco na execucao ao vivo (modo run). */
+    /**
+     * Etapa em foco na execucao ao vivo (modo run). Sem ela, o proprio Rail
+     * assume a etapa que roda ou aguarda. Execucao encerrada nao tem etapa
+     * atual, e ninguem ganha elevacao: sombra que sobrevive ao fim da execucao
+     * aponta para nada.
+     */
     activeStepId?: string;
     /** Etapa selecionada no construtor (modo edit). */
     selectedStepId?: string;

package/dist/emails/balance-sheet-finalized/components/Rail/types.d.ts

@@ -9,7 +9,7 @@ import React from "react";
 /** edit = construtor. run = acompanhamento ao vivo. Mesma arvore. */
 export type RailMode = "edit" | "run";
 /** Os 4 tipos de etapa. Espelha `StepKind` do gyra-operation. */
-export type RailStepKind = "ANALYSIS" | "DEEPEN" | "CHECKPOINT" | "RELATIONSHIPS";
+export type RailStepKind = "ANALYSIS" | "DEEPEN" | "CHECKPOINT" | "RELATIONSHIPS" | "RESULT" | "OFFER_REVIEW" | "COMMITTEE" | "AUTHORITY";
 /**
  * A condicao do conector: sempre avaliada contra a ULTIMA decisao registrada
  * na esteira. Espelha `Gate` do gyra-operation.
@@ -43,7 +43,8 @@ export type RailLeaf = {
  * Uma etapa da esteira (o dado; o componente que a desenha se chama RailStep).
  *
  * Anatomia do cartao, nas duas linhas que ele tem:
- *   linha 1: glifo do tipo (chip neutro, tooltip com o nome do tipo) + `title`
+ *   linha 1: glifo do tipo (chip de 24px na cor do tipo, tooltip com o nome
+ *            do tipo) + `title`
  *            + `meta` (chips pequenos) e, a direita, o estado (run) ou as
  *            acoes de ordenar/remover (edit, so no hover).
  *   linha 2: `policyControl` (edit) ou `policyName` (run) para Analise e
@@ -75,6 +76,15 @@ export type RailStepData = {
      * `policyName`. Ignorado no modo run.
      */
     policyControl?: React.ReactNode;
+    /**
+     * O nome da etapa E o nome da politica (o caso default, e o mais comum).
+     * Nesse caso a politica NAO ganha uma linha propria: no modo edit o seletor
+     * inline sobe para a linha 1 e vira o proprio nome; no run, a linha 2 some.
+     * Sem isto o cartao imprimia a mesma string duas vezes, empilhada.
+     *
+     * Sem valor, o RailStep compara `title` com `policyName`.
+     */
+    policyIsTitle?: boolean;
     /**
      * A condicao do conector que fica ACIMA desta etapa. A primeira etapa da
      * esteira nao tem conector, entao o campo e ignorado nela.

package/dist/emails/balance-sheet-finalized/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import "./index.css";
+type SkeletonProps = {
+    id?: string;
+    className?: string;
+    /**
+     * Forma do placeholder:
+     * - `text`: linhas de texto (a ultima sai mais curta, como um paragrafo real)
+     * - `block`: retangulo cheio (grafico, mapa, tabela, imagem)
+     * - `circle`: avatar, badge, icone
+     */
+    variant?: "text" | "block" | "circle";
+    /** Quantidade de linhas. So vale para `variant="text"`. */
+    lines?: number;
+    /** Diametro do circulo. So vale para `variant="circle"`. */
+    size?: number;
+    width?: number | string;
+    height?: number | string;
+    /**
+     * Liga o brilho que varre o bloco. Padrao `true`.
+     *
+     * Passe `false` para o que esta ESPERANDO em vez de acontecendo (item na
+     * fila, seção que ainda nao comecou). O bloco parado marca o espaco sem
+     * prometer trabalho que nao esta em curso, e o movimento fica reservado
+     * para o que de fato esta sendo processado.
+     */
+    animated?: boolean;
+    /**
+     * Marca o bloco como decorativo: sai da arvore de acessibilidade e nao
+     * anuncia nada.
+     *
+     * Use quando VARIOS skeletons compoem um placeholder so (as celulas de uma
+     * tabela, as linhas de um feed) e quem anuncia o estado e' um elemento de
+     * status unico, fora deles. Sem isso, cada bloco vira uma live region e o
+     * leitor de tela repete "Carregando" uma vez por celula.
+     */
+    decorative?: boolean;
+};
+/**
+ * Placeholder de carregamento no formato do conteudo que esta chegando.
+ *
+ * Substitui o spinner: em vez de um indicador generico no meio da tela, o
+ * usuario ve a silhueta do que vai aparecer, entao o layout nao pula quando o
+ * dado chega. E o padrao dos apps modernos (Stripe, Linear, GitHub).
+ *
+ * A animacao e um brilho que varre o bloco, desligado sob
+ * `prefers-reduced-motion`.
+ */
+declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, decorative, }: SkeletonProps) => React.JSX.Element;
+export { Skeleton };

package/dist/emails/balance-sheet-finalized/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/dist/emails/balance-sheet-finalized/components/Table/Table.d.ts

@@ -19,11 +19,24 @@ type TableProps = {
         text?: string;
     };
     headlesss?: boolean;
+    /**
+     * Estado de carregamento da tabela. O desenho depende de JA existir dado:
+     *
+     * - **sem linhas** (primeira carga): linhas de skeleton na forma das
+     *   `columns`, entao a tabela nao muda de largura quando o dado chega.
+     * - **com linhas** (refetch por filtro, busca ou acao de linha): as linhas
+     *   ficam, esmaecidas, com uma barra fina de progresso no topo. Apagar o
+     *   que o usuario esta lendo para mostrar um placeholder e' pior do que
+     *   deixar o dado velho a vista por um instante.
+     */
+    loading?: boolean;
+    /** Quantas linhas de skeleton desenhar na primeira carga. Padrao 5. */
+    loadingRows?: number;
     onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, data: any) => void;
     /** Optional per-row className. Receives the row's data object and its
      *  zero-based index. Useful for transient state highlights (e.g. a row
      *  that just finished processing in real-time). */
     rowClassName?: (data: any, index: number) => string | undefined;
 };
-declare const Table: ({ id, className, height, type, columns, data, empty, headlesss, onRowClick, rowClassName, }: TableProps) => React.JSX.Element;
+declare const Table: ({ id, className, height, type, columns, data, empty, headlesss, loading, loadingRows, onRowClick, rowClassName, }: TableProps) => React.JSX.Element;
 export { Table };

package/dist/emails/balance-sheet-finalized/index.d.ts

@@ -46,6 +46,7 @@ import "./components/SegmentedToggle/index.css";
 import "./components/Select/index.css";
 import "./components/Selector/index.css";
 import "./components/SelectTree/index.css";
+import "./components/Skeleton/index.css";
 import "./components/PickerPopover/index.css";
 import "./components/MultiSelectPicker/index.css";
 import "./components/RuleSearchPicker/index.css";

package/dist/emails/email/components/Card/Card.d.ts

@@ -15,6 +15,12 @@ type CardProps = {
     media?: React.ReactNode;
     disabled?: boolean;
     loading?: boolean;
+    /**
+     * Placeholder exibido no lugar do conteudo enquanto `loading`. O padrao e um
+     * skeleton de linhas de texto; passe um skeleton com a forma do conteudo real
+     * (grafico, tabela, lista) quando isso ajudar a evitar o pulo de layout.
+     */
+    loadingContent?: React.ReactNode;
     collapsible?: boolean;
     defaultCollapsed?: boolean;
     collapsed?: boolean;
@@ -23,5 +29,5 @@ type CardProps = {
     headerContent?: React.ReactNode;
     children?: React.ReactNode;
 };
-declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
+declare const Card: ({ id, type, className, title, subtitle, media, disabled, loading, loadingContent, collapsible, defaultCollapsed, collapsed, onCollapse, onClick, headerContent, children, }: CardProps) => React.JSX.Element;
 export { Card };

package/dist/emails/email/components/Empty/Empty.d.ts

@@ -3,8 +3,25 @@ import "./index.css";
 type EmptyProps = {
     id?: string;
     className?: string;
+    /**
+     * Ilustracao opcional. Use SO em zero state de pagina ou area inteira, do
+     * tipo "primeiro uso, ainda nao ha nada aqui", onde ela vem acompanhada de
+     * um titulo e de uma acao.
+     *
+     * Dentro de card ou de tabela de seção o padrao e' texto puro, sem grafico:
+     * a mesma ilustracao repetida dezenas de vezes na mesma pagina vira ruido e
+     * compete com o dado que importa. E' o que Stripe e Linear fazem em tabela.
+     */
     icon?: React.ReactNode;
     text?: string;
 };
-declare const Empty: ({ id, className, icon, text, }: EmptyProps) => React.JSX.Element;
+/**
+ * Estado vazio: diz que nao ha nada ali, sem roubar a atencao do que ha.
+ *
+ * Discreto de proposito, em texto secundario. Uma lista vazia raramente e' o
+ * assunto da tela, e num relatorio de credito ela costuma ate ser boa noticia
+ * ("nenhuma sanção encontrada"), entao nao deve parecer erro nem falha de
+ * carregamento.
+ */
+declare const Empty: ({ id, className, icon, text }: EmptyProps) => React.JSX.Element;
 export { Empty };

package/dist/emails/email/components/Rail/Rail.d.ts

@@ -30,7 +30,12 @@ type RailProps = {
     steps: Array<RailStepData>;
     /** Rotulo acessivel da lista. Default: "Esteira". */
     ariaLabel?: string;
-    /** Etapa em foco na execucao ao vivo (modo run). */
+    /**
+     * Etapa em foco na execucao ao vivo (modo run). Sem ela, o proprio Rail
+     * assume a etapa que roda ou aguarda. Execucao encerrada nao tem etapa
+     * atual, e ninguem ganha elevacao: sombra que sobrevive ao fim da execucao
+     * aponta para nada.
+     */
     activeStepId?: string;
     /** Etapa selecionada no construtor (modo edit). */
     selectedStepId?: string;

package/dist/emails/email/components/Rail/types.d.ts

@@ -9,7 +9,7 @@ import React from "react";
 /** edit = construtor. run = acompanhamento ao vivo. Mesma arvore. */
 export type RailMode = "edit" | "run";
 /** Os 4 tipos de etapa. Espelha `StepKind` do gyra-operation. */
-export type RailStepKind = "ANALYSIS" | "DEEPEN" | "CHECKPOINT" | "RELATIONSHIPS";
+export type RailStepKind = "ANALYSIS" | "DEEPEN" | "CHECKPOINT" | "RELATIONSHIPS" | "RESULT" | "OFFER_REVIEW" | "COMMITTEE" | "AUTHORITY";
 /**
  * A condicao do conector: sempre avaliada contra a ULTIMA decisao registrada
  * na esteira. Espelha `Gate` do gyra-operation.
@@ -43,7 +43,8 @@ export type RailLeaf = {
  * Uma etapa da esteira (o dado; o componente que a desenha se chama RailStep).
  *
  * Anatomia do cartao, nas duas linhas que ele tem:
- *   linha 1: glifo do tipo (chip neutro, tooltip com o nome do tipo) + `title`
+ *   linha 1: glifo do tipo (chip de 24px na cor do tipo, tooltip com o nome
+ *            do tipo) + `title`
  *            + `meta` (chips pequenos) e, a direita, o estado (run) ou as
  *            acoes de ordenar/remover (edit, so no hover).
  *   linha 2: `policyControl` (edit) ou `policyName` (run) para Analise e
@@ -75,6 +76,15 @@ export type RailStepData = {
      * `policyName`. Ignorado no modo run.
      */
     policyControl?: React.ReactNode;
+    /**
+     * O nome da etapa E o nome da politica (o caso default, e o mais comum).
+     * Nesse caso a politica NAO ganha uma linha propria: no modo edit o seletor
+     * inline sobe para a linha 1 e vira o proprio nome; no run, a linha 2 some.
+     * Sem isto o cartao imprimia a mesma string duas vezes, empilhada.
+     *
+     * Sem valor, o RailStep compara `title` com `policyName`.
+     */
+    policyIsTitle?: boolean;
     /**
      * A condicao do conector que fica ACIMA desta etapa. A primeira etapa da
      * esteira nao tem conector, entao o campo e ignorado nela.

package/dist/emails/email/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import "./index.css";
+type SkeletonProps = {
+    id?: string;
+    className?: string;
+    /**
+     * Forma do placeholder:
+     * - `text`: linhas de texto (a ultima sai mais curta, como um paragrafo real)
+     * - `block`: retangulo cheio (grafico, mapa, tabela, imagem)
+     * - `circle`: avatar, badge, icone
+     */
+    variant?: "text" | "block" | "circle";
+    /** Quantidade de linhas. So vale para `variant="text"`. */
+    lines?: number;
+    /** Diametro do circulo. So vale para `variant="circle"`. */
+    size?: number;
+    width?: number | string;
+    height?: number | string;
+    /**
+     * Liga o brilho que varre o bloco. Padrao `true`.
+     *
+     * Passe `false` para o que esta ESPERANDO em vez de acontecendo (item na
+     * fila, seção que ainda nao comecou). O bloco parado marca o espaco sem
+     * prometer trabalho que nao esta em curso, e o movimento fica reservado
+     * para o que de fato esta sendo processado.
+     */
+    animated?: boolean;
+    /**
+     * Marca o bloco como decorativo: sai da arvore de acessibilidade e nao
+     * anuncia nada.
+     *
+     * Use quando VARIOS skeletons compoem um placeholder so (as celulas de uma
+     * tabela, as linhas de um feed) e quem anuncia o estado e' um elemento de
+     * status unico, fora deles. Sem isso, cada bloco vira uma live region e o
+     * leitor de tela repete "Carregando" uma vez por celula.
+     */
+    decorative?: boolean;
+};
+/**
+ * Placeholder de carregamento no formato do conteudo que esta chegando.
+ *
+ * Substitui o spinner: em vez de um indicador generico no meio da tela, o
+ * usuario ve a silhueta do que vai aparecer, entao o layout nao pula quando o
+ * dado chega. E o padrao dos apps modernos (Stripe, Linear, GitHub).
+ *
+ * A animacao e um brilho que varre o bloco, desligado sob
+ * `prefers-reduced-motion`.
+ */
+declare const Skeleton: ({ id, className, variant, lines, size, width, height, animated, decorative, }: SkeletonProps) => React.JSX.Element;
+export { Skeleton };

package/dist/emails/email/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from "./Skeleton";

package/dist/emails/email/components/Table/Table.d.ts

@@ -19,11 +19,24 @@ type TableProps = {
         text?: string;
     };
     headlesss?: boolean;
+    /**
+     * Estado de carregamento da tabela. O desenho depende de JA existir dado:
+     *
+     * - **sem linhas** (primeira carga): linhas de skeleton na forma das
+     *   `columns`, entao a tabela nao muda de largura quando o dado chega.
+     * - **com linhas** (refetch por filtro, busca ou acao de linha): as linhas
+     *   ficam, esmaecidas, com uma barra fina de progresso no topo. Apagar o
+     *   que o usuario esta lendo para mostrar um placeholder e' pior do que
+     *   deixar o dado velho a vista por um instante.
+     */
+    loading?: boolean;
+    /** Quantas linhas de skeleton desenhar na primeira carga. Padrao 5. */
+    loadingRows?: number;
     onRowClick?: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent>, data: any) => void;
     /** Optional per-row className. Receives the row's data object and its
      *  zero-based index. Useful for transient state highlights (e.g. a row
      *  that just finished processing in real-time). */
     rowClassName?: (data: any, index: number) => string | undefined;
 };
-declare const Table: ({ id, className, height, type, columns, data, empty, headlesss, onRowClick, rowClassName, }: TableProps) => React.JSX.Element;
+declare const Table: ({ id, className, height, type, columns, data, empty, headlesss, loading, loadingRows, onRowClick, rowClassName, }: TableProps) => React.JSX.Element;
 export { Table };

package/dist/emails/email/index.d.ts

@@ -46,6 +46,7 @@ import "./components/SegmentedToggle/index.css";
 import "./components/Select/index.css";
 import "./components/Selector/index.css";
 import "./components/SelectTree/index.css";
+import "./components/Skeleton/index.css";
 import "./components/PickerPopover/index.css";
 import "./components/MultiSelectPicker/index.css";
 import "./components/RuleSearchPicker/index.css";