@gyramais/gyra-design 0.2.48 → 0.2.50

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

@@ -0,0 +1,68 @@
+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. 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,
+ *     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. 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`. 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. */
+    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/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

@@ -0,0 +1,29 @@
+import React from "react";
+import "./index.css";
+import type { RailStepData } from "./types";
+/**
+ * RailMini, a MESMA esteira, do tamanho de uma celula de lista.
+ *
+ * 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
+ * ambiguidade.
+ */
+type RailMiniProps = {
+    className?: string;
+    steps: Array<RailStepData>;
+    /** Rotulo acessivel. Default: "Progresso da esteira". */
+    ariaLabel?: string;
+    /** Mostra o resumo em texto ao lado das bolinhas. Default: false. */
+    showSummary?: boolean;
+};
+/** 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

@@ -0,0 +1,40 @@
+import React from "react";
+import "./index.css";
+import type { RailLeaf, RailMode, RailStepData, RailTone } from "./types";
+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;
+};
+/** 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, StatusDot as RailStatusDot };
+export type { RailStepProps };

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

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