@gyramais/gyra-design 0.2.52 → 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/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

@@ -1,33 +1,65 @@
-/**
- * Preset do email "Análise financeira concluída" enviado quando o gyra-ai
- * finaliza a extração de um balanço (feature Finsights — CU-86aherfzc).
- *
- * Esta é uma **camada fina de mapeamento de domínio** sobre o
- * `buildEmail` genérico: recebe os campos crus que o gyra-ai produz
- * (score, risk, recommendation, xlsxUrl, ...) e monta o `EmailLayoutInput`
- * com as decisões visuais (cor do risco, tom do veredito, textos padrão).
- *
- * Pra criar outro preset (ex: `password-reset`, `report-finalized`,
- * `batch-finalized`), criar uma pasta nova em `src/emails/<name>/` que
- * importe `buildEmail` e exporte uma função `<name>Email(payload)` com a
- * mesma assinatura: `{ subject, html }`.
- */
-export type BalanceSheetFinalizedPayload = {
-    firstName?: string;
-    companyName?: string;
-    score?: number | string;
-    risk?: string;
-    recommendation?: string;
-    xlsxUrl?: string;
-    reportUrl?: string;
-};
-/**
- * Monta `{ subject, html }` do email "Análise financeira concluída" a
- * partir do payload do gyra-ai (score, risco, recomendação, XLS, etc).
- * Usado pelo gyra-communication (envio via SendGrid) e pelo Storybook
- * (preview).
- */
-export declare function balanceSheetFinalizedEmail(payload: BalanceSheetFinalizedPayload): {
-    subject: string;
-    html: string;
-};
+import "./index.css";
+import "react-toastify/dist/ReactToastify.css";
+import "react-modern-drawer/dist/index.css";
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+import "react-datepicker/dist/react-datepicker.css";
+import "react-circular-progressbar/dist/styles.css";
+import "./components/AiParecer/index.css";
+import "./components/Avatar/index.css";
+import "./components/Button/index.css";
+import "./components/Card/index.css";
+import "./components/Chart/index.css";
+import "./components/ChatWidget/index.css";
+import "./components/Checkbox/index.css";
+import "./components/Col/index.css";
+import "./components/Collapse/index.css";
+import "./components/Divider/index.css";
+import "./components/DistributionBar/index.css";
+import "./components/Drawer/index.css";
+import "./components/DropdownMenu/index.css";
+import "./components/Empty/index.css";
+import "./components/Filter/index.css";
+import "./components/FloatingCard/index.css";
+import "./components/Form/index.css";
+import "./components/Gauge/index.css";
+import "./components/HoverCard/index.css";
+import "./components/Icon/index.css";
+import "./components/IconDisplay/index.css";
+import "./components/Information/index.css";
+import "./components/Input/index.css";
+import "./components/Layout/index.css";
+import "./components/List/index.css";
+import "./components/Loading/index.css";
+import "./components/Logo/index.css";
+import "./components/Menubar/index.css";
+import "./components/Modal/index.css";
+import "./components/Popover/index.css";
+import "./components/ProcessingChip/index.css";
+import "./components/Progress/index.css";
+import "./components/RadioGroup/index.css";
+import "./components/Rail/index.css";
+import "./components/RichInput/index.css";
+import "./components/Row/index.css";
+import "./components/ScoreBar/index.css";
+import "./components/SegmentedPicker/index.css";
+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";
+import "./components/OperatorPicker/index.css";
+import "./components/ContextMenu/index.css";
+import "./components/StatusTag/index.css";
+import "./components/Switch/index.css";
+import "./components/SyncChip/index.css";
+import "./components/Table/index.css";
+import "./components/Tabs/index.css";
+import "./components/Tag/index.css";
+import "./components/Tooltip/index.css";
+import "./components/Stepper/index.css";
+import "./components/TourGuide/index.css";
+import theme from "./theme";
+export default theme;

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/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

@@ -1,94 +1,65 @@
-/**
- * Email transacional genérico — Gyra+ design system.
- *
- * **FONTE DA VERDADE** dos layouts de email transacional. Usado por
- * qualquer fluxo que precise mandar email no padrão visual Gyra+:
- *   - reset de senha, confirmação de cadastro, alertas internos
- *   - finalização de processamento (Finsights, batch-report, etc)
- *   - notificações de operação/crédito
- *   - convites, mudança de plano, alerts de billing...
- *
- * **TS puro**: sem React, sem DOM, sem browser globals. Apenas funções que
- * retornam string HTML. Funciona igual em qualquer runtime Node (Nest) ou
- * bundle browser (Next).
- *
- * **Email-safe**: tabelas + inline-style (clients ignoram <style> externo,
- * flexbox e Material Symbols). Gradientes têm fallback sólido.
- *
- * Tokens visuais alinhados com gyra-design: azul #1256FF (acao/primary),
- * roxo #7C4EFF (IA/parecer), neutrals Apple-gray, fonte Inter.
- *
- * **Como usar:**
- * ```ts
- * import { buildEmail } from '@gyramais/gyra-design/dist/emails/email';
- *
- * const html = buildEmail({
- *   preheader: 'Senha redefinida com sucesso',
- *   greeting: 'Olá, Maria',
- *   title: 'Sua senha foi redefinida',
- *   paragraphs: ['Tudo certo. Você já pode entrar com a nova senha.'],
- *   buttons: [{ label: 'Entrar', url: 'https://app.gyramais.com/login' }],
- *   footerNote: 'Se não foi você, redefina novamente clicando em "Esqueci minha senha".',
- * });
- * ```
- *
- * Pra emails recorrentes (mesmo conteudo, payload variavel), criar um
- * **preset** em `src/emails/<preset-name>/index.ts` que monta o
- * `EmailLayoutInput` a partir de campos de dominio e delega aqui. Ver
- * `balance-sheet-finalized` como exemplo.
- */
-export type EmailButton = {
-    label: string;
-    url: string;
-    /** primary = botão azul preenchido, secondary = outline. Default primary. */
-    variant?: 'primary' | 'secondary';
-};
-export type EmailHighlight = {
-    /** label pequeno em cima (ex: "Score", "Nivel de risco"). */
-    label: string;
-    /** valor grande em baixo (ex: "820", "Baixo"). */
-    value: string;
-    /** cor do valor (ex: cor do risco). Default: tinta padrao Apple-gray. */
-    color?: string;
-};
-/** Tom semantico do chip de veredito do bloco Parecer GYRA+IA. */
-export type AiParecerTone = 'ok' | 'warn' | 'danger' | 'info';
-export type EmailAiParecer = {
-    /** chip de veredito (ex: "Médio", "Consistente"). Opcional. */
-    verdict?: string;
-    verdictTone?: AiParecerTone;
-    /** corpo do parecer. */
-    text: string;
-    /** rodape do bloco (ex: "GYRA+IA · Confiança 96%"). Opcional. */
-    footer?: string;
-};
-export type EmailLayoutInput = {
-    /** Texto invisivel no preheader (preview no inbox). */
-    preheader?: string;
-    /** Linha curta acima do titulo (ex: "Olá, Maria"). */
-    greeting?: string;
-    /** Titulo principal (H1). */
-    title: string;
-    /** Paragrafos de corpo (sub-frases). */
-    paragraphs?: string[];
-    /** Cards lado-a-lado (1 a N). Largura dividida igualmente. */
-    highlights?: EmailHighlight[];
-    /** Bloco "Parecer GYRA+IA" (faixa roxa com chip + texto + rodape). */
-    aiParecer?: EmailAiParecer;
-    /** Botoes de acao. Multiplos viram lado-a-lado. */
-    buttons?: EmailButton[];
-    /** Texto pequeno no rodape do card (disclaimer, instrucoes extras). */
-    footerNote?: string;
-};
-/**
- * Monta o HTML completo de um email no padrão Gyra+: logo no topo, card
- * principal com greeting + título + parágrafos + highlights (chips lado a
- * lado) + bloco "Parecer GYRA+IA" + botões, e rodapé padrão.
- *
- * Email-safe (tabelas + inline-style, sem flexbox, sem <style>). Funciona
- * em Gmail, Outlook (Windows/Web/Mac), Apple Mail, Thunderbird, mobile.
- *
- * Todas as seções (greeting, paragraphs, highlights, aiParecer, buttons,
- * footerNote) são **opcionais** — só `title` é obrigatório.
- */
-export declare function buildEmail(input: EmailLayoutInput): string;
+import "./index.css";
+import "react-toastify/dist/ReactToastify.css";
+import "react-modern-drawer/dist/index.css";
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+import "react-datepicker/dist/react-datepicker.css";
+import "react-circular-progressbar/dist/styles.css";
+import "./components/AiParecer/index.css";
+import "./components/Avatar/index.css";
+import "./components/Button/index.css";
+import "./components/Card/index.css";
+import "./components/Chart/index.css";
+import "./components/ChatWidget/index.css";
+import "./components/Checkbox/index.css";
+import "./components/Col/index.css";
+import "./components/Collapse/index.css";
+import "./components/Divider/index.css";
+import "./components/DistributionBar/index.css";
+import "./components/Drawer/index.css";
+import "./components/DropdownMenu/index.css";
+import "./components/Empty/index.css";
+import "./components/Filter/index.css";
+import "./components/FloatingCard/index.css";
+import "./components/Form/index.css";
+import "./components/Gauge/index.css";
+import "./components/HoverCard/index.css";
+import "./components/Icon/index.css";
+import "./components/IconDisplay/index.css";
+import "./components/Information/index.css";
+import "./components/Input/index.css";
+import "./components/Layout/index.css";
+import "./components/List/index.css";
+import "./components/Loading/index.css";
+import "./components/Logo/index.css";
+import "./components/Menubar/index.css";
+import "./components/Modal/index.css";
+import "./components/Popover/index.css";
+import "./components/ProcessingChip/index.css";
+import "./components/Progress/index.css";
+import "./components/RadioGroup/index.css";
+import "./components/Rail/index.css";
+import "./components/RichInput/index.css";
+import "./components/Row/index.css";
+import "./components/ScoreBar/index.css";
+import "./components/SegmentedPicker/index.css";
+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";
+import "./components/OperatorPicker/index.css";
+import "./components/ContextMenu/index.css";
+import "./components/StatusTag/index.css";
+import "./components/Switch/index.css";
+import "./components/SyncChip/index.css";
+import "./components/Table/index.css";
+import "./components/Tabs/index.css";
+import "./components/Tag/index.css";
+import "./components/Tooltip/index.css";
+import "./components/Stepper/index.css";
+import "./components/TourGuide/index.css";
+import theme from "./theme";
+export default theme;