@gyramais/gyra-design 0.2.48 → 0.2.49

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

@@ -0,0 +1,59 @@
+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
+ * 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.
+ *
+ * Dois modos, uma arvore so:
+ *   - `edit`: inserir etapa entre etapas, trocar a condicao do conector,
+ *     reordenar.
+ *   - `run`: a mesma linha com estado por etapa. Etapa que nao disparou fica
+ *     translucida com o motivo a vista.
+ *
+ * Teclado: a esteira e UM ponto de tabulacao (roving tabindex). Setas
+ * cima/baixo andam entre etapas, Home/End vao para a primeira/ultima, e
+ * Alt+setas reordenam no modo edit. Todo controle dentro da etapa (conector,
+ * abrir relatorio, remover, folhas) e um botao ou link de verdade.
+ */
+type RailProps = {
+    id?: string;
+    className?: string;
+    /** Default: "edit". */
+    mode?: RailMode;
+    steps: Array<RailStepData>;
+    /** Rotulo acessivel da lista. Default: "Esteira". */
+    ariaLabel?: string;
+    /** Etapa em foco na execucao ao vivo (modo run). */
+    activeStepId?: string;
+    /** Etapa selecionada no construtor (modo edit). */
+    selectedStepId?: string;
+    /** Condicoes oferecidas nos conectores. Default: as quatro. */
+    gateOptions?: Array<RailGateCondition>;
+    /** Folhas abertas (controlado). Sem isto, a expansao e interna. */
+    expandedStepIds?: Array<string>;
+    /** Folhas abertas na primeira renderizacao (nao controlado). */
+    defaultExpandedStepIds?: Array<string>;
+    /** Rotulo do botao que acrescenta etapa no fim. Default: "Adicionar etapa". */
+    addLabel?: string;
+    /** Texto da esteira vazia. */
+    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). */
+    onInsertStep?: (index: number) => void;
+    onRemoveStep?: (step: RailStepData) => void;
+    /** Reordenar. `toIndex` ja vem calculado e dentro dos limites. */
+    onMoveStep?: (step: RailStepData, direction: "up" | "down", toIndex: number) => void;
+    onExpandStep?: (stepId: string, expanded: boolean) => void;
+};
+declare const Rail: ({ id, className, mode, steps, ariaLabel, activeStepId, selectedStepId, gateOptions, expandedStepIds, defaultExpandedStepIds, addLabel, emptyText, onSelectStep, onOpenStep, onOpenLeaf, onChangeGate, onInsertStep, onRemoveStep, onMoveStep, onExpandStep, }: RailProps) => React.JSX.Element;
+export { Rail };
+export type { RailProps };

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

@@ -0,0 +1,22 @@
+import React from "react";
+import "./index.css";
+import type { RailGateCondition } from "./types";
+type RailGateState = "default" | "passed" | "blocked";
+type RailGateProps = {
+    id?: string;
+    className?: string;
+    value?: RailGateCondition;
+    /** Quando falso, o conector e so leitura (modo run, ou etapa travada). */
+    editable?: boolean;
+    disabled?: boolean;
+    /** Quais condicoes oferecer. Default: as quatro, na ordem canonica. */
+    options?: Array<RailGateCondition>;
+    /** No modo run: se a condicao foi atendida, bloqueou, ou nem chegou a valer. */
+    state?: RailGateState;
+    /** Rotulo acessivel do grupo, ex: "Conector antes da etapa 2". */
+    ariaLabel?: string;
+    onChange?: (value: RailGateCondition) => void;
+};
+declare const RailGate: ({ id, className, value, editable, disabled, options, state, ariaLabel, onChange, }: RailGateProps) => React.JSX.Element;
+export { RailGate };
+export type { RailGateProps, RailGateState };

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

@@ -0,0 +1,25 @@
+import React from "react";
+import "./index.css";
+import type { RailStepData } from "./types";
+/**
+ * RailMini — a MESMA esteira, do tamanho de uma linha 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.
+ *
+ * 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
+ * ambiguidade.
+ */
+type RailMiniProps = {
+    className?: string;
+    steps: Array<RailStepData>;
+    /** Rotulo acessivel. Default: "Progresso da esteira". */
+    ariaLabel?: string;
+};
+declare const RailMini: ({ className, steps, ariaLabel }: RailMiniProps) => React.JSX.Element | null;
+export { RailMini };
+export type { RailMiniProps };

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

@@ -0,0 +1,45 @@
+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.
+ */
+type RailStepProps = {
+    id?: string;
+    className?: string;
+    step: RailStepData;
+    mode?: RailMode;
+    /** Posicao 1-based na esteira. */
+    index?: number;
+    /** Total de etapas, para o "Etapa 2 de 5" lido pelo leitor de tela. */
+    total?: number;
+    /** Etapa em foco na execucao ao vivo. */
+    active?: boolean;
+    /** Etapa selecionada no construtor. */
+    selected?: boolean;
+    /** Folhas visiveis. */
+    expanded?: boolean;
+    canMoveUp?: boolean;
+    canMoveDown?: boolean;
+    /** Roving tabindex: o Rail decide qual etapa esta na ordem de tabulacao. */
+    tabIndex?: number;
+    onExpand?: (expanded: boolean) => void;
+    onOpen?: () => void;
+    onSelect?: () => void;
+    onRemove?: () => void;
+    onMove?: (direction: "up" | "down") => void;
+    onOpenLeaf?: (leaf: RailLeaf) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+};
+declare const RailStep: React.ForwardRefExoticComponent<RailStepProps & React.RefAttributes<HTMLDivElement>>;
+export { RailStep };
+export type { RailStepProps };

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

@@ -0,0 +1,6 @@
+export * from "./Rail";
+export * from "./RailStep";
+export * from "./RailMini";
+export * from "./RailGate";
+export * from "./labels";
+export * from "./types";