@gyramais/gyra-design 0.2.49 → 0.2.52

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

@@ -2,12 +2,14 @@ import React from "react";
 import "./index.css";
 import type { RailGateCondition, RailLeaf, RailMode, RailStepData } from "./types";
 /**
- * Rail — a esteira Gyra+: uma lista ordenada e vertical de etapas, com um
+ * Rail, a esteira Gyra+: uma lista ordenada e vertical de etapas, com um
  * conector condicional entre elas.
  *
  * Uma linha, nao um grafo: le de cima para baixo na mesma ordem em que a
  * decisao acontece. A referencia e o Atalhos da Apple, nao um editor de
- * diagramas.
+ * diagramas. O rail e a unica fonte de verdade da esteira na UI: a primeira
+ * etapa de Analise E a politica principal, e o conector acima de cada etapa
+ * E a condicao para ela rodar. Nao existe conector acima da primeira etapa.
  *
  * Dois modos, uma arvore so:
  *   - `edit`: inserir etapa entre etapas, trocar a condicao do conector,
@@ -28,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;
@@ -40,14 +47,21 @@ type RailProps = {
     defaultExpandedStepIds?: Array<string>;
     /** Rotulo do botao que acrescenta etapa no fim. Default: "Adicionar etapa". */
     addLabel?: string;
-    /** Texto da esteira vazia. */
+    /**
+     * Texto da esteira vazia. E AQUI que mora o tutorial ("Comece pela
+     * análise: a primeira etapa é a política principal"), nunca no cartao.
+     */
     emptyText?: string;
     onSelectStep?: (step: RailStepData) => void;
     onOpenStep?: (step: RailStepData) => void;
     onOpenLeaf?: (leaf: RailLeaf, step: RailStepData) => void;
     /** Trocar a condicao do conector que fica ACIMA da etapa `stepId`. */
     onChangeGate?: (stepId: string, condition: RailGateCondition) => void;
-    /** Inserir etapa na posicao `index` (0 = antes da primeira). */
+    /**
+     * Inserir etapa na posicao `index`. O construtor oferece inserir ENTRE
+     * etapas (index >= 1, no conector) e no fim; a posicao 0 so acontece na
+     * esteira vazia, porque a primeira etapa e a politica principal.
+     */
     onInsertStep?: (index: number) => void;
     onRemoveStep?: (step: RailStepData) => void;
     /** Reordenar. `toIndex` ja vem calculado e dentro dos limites. */

package/dist/components/Rail/RailInlineSelect.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+import "./index.css";
+/**
+ * RailInlineSelect, o gatilho "inline select" da linha 2 do cartao: texto +
+ * chevron, sem borda, no corpo do texto. E o que a politica de uma etapa usa
+ * no modo edit (clicou, vira picker), no lugar de um Input de rotulo
+ * flutuante de 40px.
+ *
+ * Nao abre nada sozinho: e um botao. O consumer o usa como trigger de um
+ * Popover/Select (por isso o forwardRef e o repasse das props restantes,
+ * que o `asChild` do Radix precisa).
+ */
+type RailInlineSelectProps = {
+    id?: string;
+    className?: string;
+    /** O valor escolhido. Sem valor, mostra o `placeholder` em tom terciario. */
+    label?: React.ReactNode;
+    /** Default: "Escolher política". */
+    placeholder?: string;
+    /** Avisa que o valor salvo nao esta disponivel (ex: politica desativada). */
+    tone?: "default" | "warning";
+    disabled?: boolean;
+    /** Estado do picker que este gatilho abre (aria-expanded). */
+    open?: boolean;
+    /** Rotulo acessivel. Default: "Política da etapa: {label ou placeholder}". */
+    ariaLabel?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className" | "disabled">;
+declare const RailInlineSelect: React.ForwardRefExoticComponent<{
+    id?: string;
+    className?: string;
+    /** O valor escolhido. Sem valor, mostra o `placeholder` em tom terciario. */
+    label?: React.ReactNode;
+    /** Default: "Escolher política". */
+    placeholder?: string;
+    /** Avisa que o valor salvo nao esta disponivel (ex: politica desativada). */
+    tone?: "default" | "warning";
+    disabled?: boolean;
+    /** Estado do picker que este gatilho abre (aria-expanded). */
+    open?: boolean;
+    /** Rotulo acessivel. Default: "Política da etapa: {label ou placeholder}". */
+    ariaLabel?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "id" | "disabled"> & React.RefAttributes<HTMLButtonElement>>;
+export { RailInlineSelect };
+export type { RailInlineSelectProps };

package/dist/components/Rail/RailMini.d.ts

@@ -2,13 +2,13 @@ import React from "react";
 import "./index.css";
 import type { RailStepData } from "./types";
 /**
- * RailMini — a MESMA esteira, do tamanho de uma linha de lista.
+ * RailMini, a MESMA esteira, do tamanho de uma celula de lista.
  *
- * Existe porque o progresso da esteira e a informacao que a listagem de
- * execucoes precisa dar de graca: sem isto, saber que a esteira parou na
- * etapa 1 de 4 custa um clique e uma expansao. E uma miniatura, nao um
- * componente novo: le o mesmo `RailStepData` do `Rail`, so que como uma fila
- * de marcas horizontais.
+ * Uma bolinha de 6px por etapa, ligadas por um fio de 1px, no maximo ~120px
+ * de largura. O resumo ("Parou na etapa 2 de 4: reprovada") vai no
+ * `aria-label` e no `title`; na tela ele so aparece com `showSummary`,
+ * porque a linha da lista ja tem a coluna de status e nao precisa dizer a
+ * mesma coisa duas vezes.
  *
  * Nao e clicavel de proposito. Quem quer detalhe abre a linha; a miniatura e
  * um indicador, e um alvo de clique dentro de outro alvo de clique so cria
@@ -19,7 +19,11 @@ type RailMiniProps = {
     steps: Array<RailStepData>;
     /** Rotulo acessivel. Default: "Progresso da esteira". */
     ariaLabel?: string;
+    /** Mostra o resumo em texto ao lado das bolinhas. Default: false. */
+    showSummary?: boolean;
 };
-declare const RailMini: ({ className, steps, ariaLabel }: RailMiniProps) => React.JSX.Element | null;
+/** O resumo em texto de uma execucao: exportado para a lista reutilizar. */
+export declare const railMiniSummary: (steps: Array<RailStepData>) => string;
+declare const RailMini: ({ className, steps, ariaLabel, showSummary }: RailMiniProps) => React.JSX.Element | null;
 export { RailMini };
 export type { RailMiniProps };

package/dist/components/Rail/RailStep.d.ts

@@ -1,17 +1,6 @@
 import React from "react";
 import "./index.css";
-import type { RailLeaf, RailMode, RailStepData } from "./types";
-/**
- * RailStep — o cartao de uma etapa.
- *
- * E o mesmo cartao nos dois modos: no `edit` ele mostra a barra de ordenacao e
- * o slot de configuracao; no `run` ele mostra o estado e as acoes. Nada de
- * duas arvores: se construir e acompanhar exigissem componentes diferentes, o
- * desenho teria falhado.
- *
- * Etapa que nao disparou fica translucida, mas o MOTIVO fica fora do cartao,
- * em contraste cheio: e a informacao que o analista precisa ler.
- */
+import type { RailLeaf, RailMode, RailStepData, RailTone } from "./types";
 type RailStepProps = {
     id?: string;
     className?: string;
@@ -40,6 +29,12 @@ type RailStepProps = {
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
 };
+/** Ponto de 6px + texto: o unico jeito de dizer estado dentro do cartao. */
+declare const StatusDot: ({ label, tone, className, }: {
+    label: string;
+    tone: RailTone;
+    className?: string;
+}) => React.JSX.Element;
 declare const RailStep: React.ForwardRefExoticComponent<RailStepProps & React.RefAttributes<HTMLDivElement>>;
-export { RailStep };
+export { RailStep, StatusDot as RailStatusDot };
 export type { RailStepProps };

package/dist/components/Rail/index.d.ts

@@ -2,5 +2,6 @@ export * from "./Rail";
 export * from "./RailStep";
 export * from "./RailMini";
 export * from "./RailGate";
+export * from "./RailInlineSelect";
 export * from "./labels";
 export * from "./types";