@gyramais/gyra-design 0.2.58 → 0.2.60

package/dist/components/Guide/useRovingFocus.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const useRovingFocus: () => (event: React.KeyboardEvent<HTMLElement>) => void;
+export { useRovingFocus };

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

@@ -0,0 +1,49 @@
+import React from "react";
+import "./index.css";
+type GuideChecklistItem = {
+    key: string;
+    title: string;
+    description?: string;
+    /** Texto curto a direita, ex. "2 min". */
+    meta?: string;
+    icon?: React.ReactNode;
+    done?: boolean;
+    onClick: () => void;
+};
+type GuideChecklistProps = {
+    id?: string;
+    className?: string;
+    title: string;
+    subtitle?: string;
+    items: GuideChecklistItem[];
+    /** Mostra o botao de minimizar no cabecalho. */
+    onMinimize?: () => void;
+    /** Acoes do menu "Mais opcoes" (ex. Recomecar, Ocultar). */
+    menu?: Array<{
+        label: string;
+        onClick: () => void;
+    }>;
+    footer?: React.ReactNode;
+    /** Placeholder no formato do cartao enquanto os passos carregam. */
+    loading?: boolean;
+    /** Texto quando nao ha passo para mostrar. */
+    emptyText?: string;
+    /**
+     * Chaves que devem tocar a animacao de concluido uma vez ao montar. Serve
+     * para o passo concluido com o cartao fechado (ex. a pessoa clicou, foi
+     * para a tela e voltou): na proxima abertura o check ainda entra animado.
+     * So anima as chaves que ja chegam com `done`.
+     */
+    animateKeys?: string[];
+};
+/**
+ * Cartao "Primeiros passos" do rodape do menu lateral.
+ *
+ * Barra segmentada (um segmento por passo), passo concluido riscado com check
+ * azul, proximo passo em destaque com a descricao. Quando um item passa a
+ * concluido, o check entra com uma animacao curta e o leitor de tela anuncia
+ * o novo progresso. Sem animacao sob `prefers-reduced-motion`.
+ */
+declare const GuideChecklist: ({ id, className, title, subtitle, items, onMinimize, menu, footer, loading, emptyText, animateKeys, }: GuideChecklistProps) => React.JSX.Element;
+export { GuideChecklist };
+export type { GuideChecklistProps, GuideChecklistItem };

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

@@ -0,0 +1,24 @@
+import React from "react";
+import "./index.css";
+type GuideChoiceOption = {
+    key: string;
+    title: string;
+    description?: string;
+    icon?: React.ReactNode;
+    recommended?: boolean;
+    onClick: () => void;
+};
+type GuideChoiceProps = {
+    id?: string;
+    className?: string;
+    title: string;
+    subtitle?: string;
+    options: GuideChoiceOption[];
+};
+/**
+ * Corpo de modal ou popover para um passo com mais de um caminho: cartoes
+ * verticais, um por opcao, com "Recomendado" discreto.
+ */
+declare const GuideChoice: ({ id, className, title, subtitle, options }: GuideChoiceProps) => React.JSX.Element;
+export { GuideChoice };
+export type { GuideChoiceProps, GuideChoiceOption };

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

@@ -0,0 +1,50 @@
+import React from "react";
+import "./index.css";
+type GuideLauncherProps = {
+    id?: string;
+    className?: string;
+    icon?: React.ReactNode;
+    /** Nome fixo da entrada, ex. "Primeiros passos" ou "Novidades". */
+    label: string;
+    /** Progresso discreto "3/5" com um anel pequeno. */
+    progress?: {
+        done: number;
+        total: number;
+    };
+    /** Contador em badge (ex. novidades nao vistas). Zero esconde o badge.
+        Recolhido, vira so um ponto; o numero vai para o Tooltip. */
+    count?: number;
+    /** Menu lateral recolhido: so o icone, com Tooltip e ponto/contador. */
+    collapsed?: boolean;
+    /** O painel que este botao abre esta aberto. */
+    active?: boolean;
+    onClick: () => void;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "id" | "className" | "children">;
+/**
+ * Linha do rodape do menu lateral que abre um painel (checklist, novidades).
+ *
+ * Aceita ref e props extras para funcionar como gatilho `asChild` de um
+ * Popover: o Radix injeta ref, `aria-expanded` e o onClick composto.
+ */
+declare const GuideLauncher: React.ForwardRefExoticComponent<{
+    id?: string;
+    className?: string;
+    icon?: React.ReactNode;
+    /** Nome fixo da entrada, ex. "Primeiros passos" ou "Novidades". */
+    label: string;
+    /** Progresso discreto "3/5" com um anel pequeno. */
+    progress?: {
+        done: number;
+        total: number;
+    };
+    /** Contador em badge (ex. novidades nao vistas). Zero esconde o badge.
+        Recolhido, vira so um ponto; o numero vai para o Tooltip. */
+    count?: number;
+    /** Menu lateral recolhido: so o icone, com Tooltip e ponto/contador. */
+    collapsed?: boolean;
+    /** O painel que este botao abre esta aberto. */
+    active?: boolean;
+    onClick: () => void;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children" | "id" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
+export { GuideLauncher };
+export type { GuideLauncherProps };

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

@@ -0,0 +1,31 @@
+import React from "react";
+import "./index.css";
+type GuideNewsItem = {
+    key: string;
+    title: string;
+    summary?: string;
+    /** Data ja formatada para exibir, ex. "12 set". */
+    date?: string;
+    /** Miniatura (imagem ou poster do video) acima do titulo. */
+    media?: React.ReactNode;
+    unread?: boolean;
+    onClick: () => void;
+};
+type GuideNewsListProps = {
+    id?: string;
+    className?: string;
+    title: string;
+    items: GuideNewsItem[];
+    /** Mostra "Marcar todas como lidas" quando ha novidade nao vista. */
+    onMarkAllRead?: () => void;
+    emptyText?: string;
+    /** Placeholder no formato da lista enquanto as novidades carregam. */
+    loading?: boolean;
+};
+/**
+ * Lista "Novidades" do rodape do menu lateral: ponto azul nas nao vistas,
+ * resumo em ate duas linhas, data discreta e miniatura opcional.
+ */
+declare const GuideNewsList: ({ id, className, title, items, onMarkAllRead, emptyText, loading, }: GuideNewsListProps) => React.JSX.Element;
+export { GuideNewsList };
+export type { GuideNewsListProps, GuideNewsItem };

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

@@ -0,0 +1,47 @@
+import React from "react";
+import "./index.css";
+type SiderListItem = {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    active?: boolean;
+    onClick: () => void;
+};
+type SiderListProps = {
+    id?: string;
+    className?: string;
+    title: string;
+    /** Botao de icone no cabecalho, ex. "+" nova conversa. */
+    action?: {
+        icon: React.ReactNode;
+        label: string;
+        onClick: () => void;
+    };
+    items: SiderListItem[];
+    /** Link no fim da lista, ex. "Todas as conversas". */
+    more?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Menu recolhido: mostra so o botao de `action`, com Tooltip. */
+    collapsed?: boolean;
+    /**
+     * Icone do botao no menu recolhido (ex. balao de conversa). Sem ele, usa o
+     * `action.icon`, que costuma ser um "+" e nao diz o que o bloco e.
+     */
+    collapsedIcon?: React.ReactNode;
+    /** Linhas de placeholder enquanto a lista carrega. */
+    loading?: boolean;
+    /**
+     * Sem itens e sem `emptyText`, o bloco nao renderiza nada (some do menu).
+     * Com `emptyText`, mostra o titulo e o texto.
+     */
+    emptyText?: string;
+};
+/**
+ * Bloco de lista curta no menu lateral (ex. "Conversas com a GYRA+"):
+ * rotulo de grupo, acao no cabecalho, ate poucos itens e um "ver todos".
+ */
+declare const SiderList: ({ id, className, title, action, items, more, collapsed, collapsedIcon, loading, emptyText, }: SiderListProps) => React.JSX.Element | null;
+export { SiderList };
+export type { SiderListProps, SiderListItem };

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

@@ -0,0 +1,5 @@
+export * from "./GuideLauncher";
+export * from "./GuideChecklist";
+export * from "./GuideNewsList";
+export * from "./GuideChoice";
+export * from "./SiderList";

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const useRovingFocus: () => (event: React.KeyboardEvent<HTMLElement>) => void;
+export { useRovingFocus };

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

@@ -22,6 +22,7 @@ import "./components/Filter/index.css";
 import "./components/FloatingCard/index.css";
 import "./components/Form/index.css";
 import "./components/Gauge/index.css";
+import "./components/Guide/index.css";
 import "./components/HoverCard/index.css";
 import "./components/Icon/index.css";
 import "./components/IconDisplay/index.css";

package/dist/emails/email/components/Guide/GuideChecklist.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import "./index.css";
+type GuideChecklistItem = {
+    key: string;
+    title: string;
+    description?: string;
+    /** Texto curto a direita, ex. "2 min". */
+    meta?: string;
+    icon?: React.ReactNode;
+    done?: boolean;
+    onClick: () => void;
+};
+type GuideChecklistProps = {
+    id?: string;
+    className?: string;
+    title: string;
+    subtitle?: string;
+    items: GuideChecklistItem[];
+    /** Mostra o botao de minimizar no cabecalho. */
+    onMinimize?: () => void;
+    /** Acoes do menu "Mais opcoes" (ex. Recomecar, Ocultar). */
+    menu?: Array<{
+        label: string;
+        onClick: () => void;
+    }>;
+    footer?: React.ReactNode;
+    /** Placeholder no formato do cartao enquanto os passos carregam. */
+    loading?: boolean;
+    /** Texto quando nao ha passo para mostrar. */
+    emptyText?: string;
+    /**
+     * Chaves que devem tocar a animacao de concluido uma vez ao montar. Serve
+     * para o passo concluido com o cartao fechado (ex. a pessoa clicou, foi
+     * para a tela e voltou): na proxima abertura o check ainda entra animado.
+     * So anima as chaves que ja chegam com `done`.
+     */
+    animateKeys?: string[];
+};
+/**
+ * Cartao "Primeiros passos" do rodape do menu lateral.
+ *
+ * Barra segmentada (um segmento por passo), passo concluido riscado com check
+ * azul, proximo passo em destaque com a descricao. Quando um item passa a
+ * concluido, o check entra com uma animacao curta e o leitor de tela anuncia
+ * o novo progresso. Sem animacao sob `prefers-reduced-motion`.
+ */
+declare const GuideChecklist: ({ id, className, title, subtitle, items, onMinimize, menu, footer, loading, emptyText, animateKeys, }: GuideChecklistProps) => React.JSX.Element;
+export { GuideChecklist };
+export type { GuideChecklistProps, GuideChecklistItem };

package/dist/emails/email/components/Guide/GuideChoice.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import "./index.css";
+type GuideChoiceOption = {
+    key: string;
+    title: string;
+    description?: string;
+    icon?: React.ReactNode;
+    recommended?: boolean;
+    onClick: () => void;
+};
+type GuideChoiceProps = {
+    id?: string;
+    className?: string;
+    title: string;
+    subtitle?: string;
+    options: GuideChoiceOption[];
+};
+/**
+ * Corpo de modal ou popover para um passo com mais de um caminho: cartoes
+ * verticais, um por opcao, com "Recomendado" discreto.
+ */
+declare const GuideChoice: ({ id, className, title, subtitle, options }: GuideChoiceProps) => React.JSX.Element;
+export { GuideChoice };
+export type { GuideChoiceProps, GuideChoiceOption };

package/dist/emails/email/components/Guide/GuideLauncher.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import "./index.css";
+type GuideLauncherProps = {
+    id?: string;
+    className?: string;
+    icon?: React.ReactNode;
+    /** Nome fixo da entrada, ex. "Primeiros passos" ou "Novidades". */
+    label: string;
+    /** Progresso discreto "3/5" com um anel pequeno. */
+    progress?: {
+        done: number;
+        total: number;
+    };
+    /** Contador em badge (ex. novidades nao vistas). Zero esconde o badge.
+        Recolhido, vira so um ponto; o numero vai para o Tooltip. */
+    count?: number;
+    /** Menu lateral recolhido: so o icone, com Tooltip e ponto/contador. */
+    collapsed?: boolean;
+    /** O painel que este botao abre esta aberto. */
+    active?: boolean;
+    onClick: () => void;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "id" | "className" | "children">;
+/**
+ * Linha do rodape do menu lateral que abre um painel (checklist, novidades).
+ *
+ * Aceita ref e props extras para funcionar como gatilho `asChild` de um
+ * Popover: o Radix injeta ref, `aria-expanded` e o onClick composto.
+ */
+declare const GuideLauncher: React.ForwardRefExoticComponent<{
+    id?: string;
+    className?: string;
+    icon?: React.ReactNode;
+    /** Nome fixo da entrada, ex. "Primeiros passos" ou "Novidades". */
+    label: string;
+    /** Progresso discreto "3/5" com um anel pequeno. */
+    progress?: {
+        done: number;
+        total: number;
+    };
+    /** Contador em badge (ex. novidades nao vistas). Zero esconde o badge.
+        Recolhido, vira so um ponto; o numero vai para o Tooltip. */
+    count?: number;
+    /** Menu lateral recolhido: so o icone, com Tooltip e ponto/contador. */
+    collapsed?: boolean;
+    /** O painel que este botao abre esta aberto. */
+    active?: boolean;
+    onClick: () => void;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children" | "id" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
+export { GuideLauncher };
+export type { GuideLauncherProps };

package/dist/emails/email/components/Guide/GuideNewsList.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import "./index.css";
+type GuideNewsItem = {
+    key: string;
+    title: string;
+    summary?: string;
+    /** Data ja formatada para exibir, ex. "12 set". */
+    date?: string;
+    /** Miniatura (imagem ou poster do video) acima do titulo. */
+    media?: React.ReactNode;
+    unread?: boolean;
+    onClick: () => void;
+};
+type GuideNewsListProps = {
+    id?: string;
+    className?: string;
+    title: string;
+    items: GuideNewsItem[];
+    /** Mostra "Marcar todas como lidas" quando ha novidade nao vista. */
+    onMarkAllRead?: () => void;
+    emptyText?: string;
+    /** Placeholder no formato da lista enquanto as novidades carregam. */
+    loading?: boolean;
+};
+/**
+ * Lista "Novidades" do rodape do menu lateral: ponto azul nas nao vistas,
+ * resumo em ate duas linhas, data discreta e miniatura opcional.
+ */
+declare const GuideNewsList: ({ id, className, title, items, onMarkAllRead, emptyText, loading, }: GuideNewsListProps) => React.JSX.Element;
+export { GuideNewsList };
+export type { GuideNewsListProps, GuideNewsItem };

package/dist/emails/email/components/Guide/SiderList.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import "./index.css";
+type SiderListItem = {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    active?: boolean;
+    onClick: () => void;
+};
+type SiderListProps = {
+    id?: string;
+    className?: string;
+    title: string;
+    /** Botao de icone no cabecalho, ex. "+" nova conversa. */
+    action?: {
+        icon: React.ReactNode;
+        label: string;
+        onClick: () => void;
+    };
+    items: SiderListItem[];
+    /** Link no fim da lista, ex. "Todas as conversas". */
+    more?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Menu recolhido: mostra so o botao de `action`, com Tooltip. */
+    collapsed?: boolean;
+    /**
+     * Icone do botao no menu recolhido (ex. balao de conversa). Sem ele, usa o
+     * `action.icon`, que costuma ser um "+" e nao diz o que o bloco e.
+     */
+    collapsedIcon?: React.ReactNode;
+    /** Linhas de placeholder enquanto a lista carrega. */
+    loading?: boolean;
+    /**
+     * Sem itens e sem `emptyText`, o bloco nao renderiza nada (some do menu).
+     * Com `emptyText`, mostra o titulo e o texto.
+     */
+    emptyText?: string;
+};
+/**
+ * Bloco de lista curta no menu lateral (ex. "Conversas com a GYRA+"):
+ * rotulo de grupo, acao no cabecalho, ate poucos itens e um "ver todos".
+ */
+declare const SiderList: ({ id, className, title, action, items, more, collapsed, collapsedIcon, loading, emptyText, }: SiderListProps) => React.JSX.Element | null;
+export { SiderList };
+export type { SiderListProps, SiderListItem };

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

@@ -0,0 +1,5 @@
+export * from "./GuideLauncher";
+export * from "./GuideChecklist";
+export * from "./GuideNewsList";
+export * from "./GuideChoice";
+export * from "./SiderList";

package/dist/emails/email/components/Guide/useRovingFocus.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const useRovingFocus: () => (event: React.KeyboardEvent<HTMLElement>) => void;
+export { useRovingFocus };

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

@@ -22,6 +22,7 @@ import "./components/Filter/index.css";
 import "./components/FloatingCard/index.css";
 import "./components/Form/index.css";
 import "./components/Gauge/index.css";
+import "./components/Guide/index.css";
 import "./components/HoverCard/index.css";
 import "./components/Icon/index.css";
 import "./components/IconDisplay/index.css";