@plenustech/design-system 0.2.3 → 0.2.5

package/dist/types/components/charts/ChartTimeline/ChartTimelineTable.d.ts

@@ -0,0 +1,25 @@
+import type { ChartTimelineSummary } from './ChartTimeline.js';
+export interface TimelineTableEntry {
+    color: string;
+    duration: string;
+    end: string;
+    name: string;
+    progress?: string;
+    start: string;
+}
+export interface TimelineTableRow {
+    description?: string;
+    entries: readonly TimelineTableEntry[];
+    key: string;
+    label: string;
+    summary?: ChartTimelineSummary;
+}
+interface ChartTimelineTableProps {
+    emptyRowLabel: string;
+    rows: readonly TimelineTableRow[];
+    showProgress: boolean;
+    title: string;
+}
+/** Leitura medida a medida do grafico: uma secao por linha, com o rotulo, a descricao e o resumo no cabecalho dela. */
+export declare function ChartTimelineTable({ emptyRowLabel, rows, showProgress, title }: ChartTimelineTableProps): import("react").JSX.Element;
+export {};

package/dist/types/components/charts/ChartTimeline/index.d.ts

@@ -0,0 +1,2 @@
+export { ChartTimeline } from './ChartTimeline.js';
+export type { ChartTimelineBand, ChartTimelineDensity, ChartTimelineGroup, ChartTimelineLabelAlign, ChartTimelineMarker, ChartTimelineMarkerShape, ChartTimelineOverlap, ChartTimelineProps, ChartTimelineReferenceLine, ChartTimelineRow, ChartTimelineRowBand, ChartTimelineScale, ChartTimelineSegment, ChartTimelineSegmentLabelContent, ChartTimelineSegmentLabels, ChartTimelineSeries, ChartTimelineState, ChartTimelineSummary, ChartTimelineTime, } from './ChartTimeline.js';

package/dist/types/components/charts/ChartTimeline/timelineLayout.d.ts

@@ -0,0 +1,70 @@
+import type { ChartTimelineGroup, ChartTimelineOverlap, ChartTimelineRow, ChartTimelineScale, ChartTimelineSegment, ChartTimelineState, ChartTimelineTime } from './ChartTimeline.js';
+export interface TimelineRange {
+    end: number;
+    start: number;
+}
+/** Intervalo com as pontas em posicao do eixo. `source` e o que o consumidor recebe de volta. */
+export interface TimelineSegment extends TimelineRange {
+    id: number;
+    label?: string;
+    progress?: number;
+    row: string;
+    series: string;
+    source: ChartTimelineSegment;
+}
+export interface PlacedSegment extends TimelineSegment {
+    lane: number;
+}
+export type TimelineItem = {
+    child: boolean;
+    height: number;
+    kind: 'row';
+    laneCount: number;
+    row: ChartTimelineRow;
+    segments: readonly PlacedSegment[];
+    y: number;
+} | {
+    collapsed: boolean;
+    group: ChartTimelineGroup;
+    height: number;
+    kind: 'group';
+    rows: readonly ChartTimelineRow[];
+    segments: readonly TimelineSegment[];
+    y: number;
+};
+/**
+ * Pontas em posicao do eixo. Em `dayHours`, o fim antes do inicio e o intervalo que cruza a meia-noite: ele termina
+ * no dia seguinte, e o desenho o corta no fim do eixo. Instante invalido, ou fim antes do inicio em datas, nao vira
+ * geometria.
+ */
+export declare function toRange(start: ChartTimelineTime, end: ChartTimelineTime, scale: ChartTimelineScale): {
+    end: number;
+    start: number;
+} | undefined;
+export declare function toTimelineSegments(segments: readonly ChartTimelineSegment[], scale: ChartTimelineScale): TimelineSegment[];
+/** Cada estado vale ate o seguinte da linha, e o ultimo ate `end`. Com `merge`, iguais seguidos viram uma regiao. */
+export declare function statesToSegments(states: readonly ChartTimelineState[], end: ChartTimelineTime, merge: boolean, scale: ChartTimelineScale): ChartTimelineSegment[];
+/** Sub-faixas: cada intervalo entra na primeira cujo ultimo intervalo ja terminou. Em `overlay`, todos na mesma. */
+export declare function placeInLanes(segments: readonly TimelineSegment[], overlap: ChartTimelineOverlap): {
+    laneCount: number;
+    segments: PlacedSegment[];
+};
+/** As linhas sem grupo, ou de grupo desconhecido, vem primeiro; depois as de cada grupo, na ordem dos grupos. */
+export declare function rowsInDisplayOrder(rows: readonly ChartTimelineRow[], groups: readonly ChartTimelineGroup[]): ChartTimelineRow[];
+export interface TimelineLayoutOptions {
+    groupHeight: number;
+    groups: readonly ChartTimelineGroup[];
+    isCollapsed: (groupKey: string) => boolean;
+    laneStep: number;
+    overlap: ChartTimelineOverlap;
+    rowGap: number;
+    rowHeight: number;
+    rows: readonly ChartTimelineRow[];
+    /** So os visiveis: a serie desligada nao ocupa sub-faixa. */
+    segments: readonly TimelineSegment[];
+}
+/** Ordem e altura de cada linha e cabecalho de grupo. A linha cresce uma sub-faixa por intervalo sobreposto. */
+export declare function layoutTimeline({ groupHeight, groups, isCollapsed, laneStep, overlap, rowGap, rowHeight, rows, segments, }: TimelineLayoutOptions): {
+    height: number;
+    items: TimelineItem[];
+};

package/dist/types/components/charts/ChartTimeline/timelineTime.d.ts

@@ -0,0 +1,16 @@
+import type { ChartTimelineScale, ChartTimelineTime } from './ChartTimeline.js';
+export declare const HOUR_MS = 3600000;
+export interface TimeTick {
+    label: string;
+    position: number;
+}
+/** Posicao no eixo: em `calendar`, milissegundos desde a epoca; em `dayHours`, a hora decimal do dia. */
+export declare function toPosition(time: ChartTimelineTime, scale: ChartTimelineScale): number;
+/** A posicao como `Date`, para os formatadores do consumidor. Em `dayHours` a data e indiferente: vale a hora. */
+export declare function toDate(position: number, scale: ChartTimelineScale): Date;
+export declare function durationMs(start: number, end: number, scale: ChartTimelineScale): number;
+/** Faixa automatica: do primeiro ao ultimo instante, arredondada a hora ou ao dia, com uma unidade no minimo. */
+export declare function autoDomain(positions: readonly number[], scale: ChartTimelineScale): [number, number];
+/** Instante no balao e na tabela: `07:12` em horas do dia; `05/10 14:00`, ou so `05/10` a meia-noite, em datas. */
+export declare function formatPosition(position: number, scale: ChartTimelineScale): string;
+export declare function timeTicks(domain: readonly [number, number], scale: ChartTimelineScale, width: number, formatTick?: (time: Date) => string): TimeTick[];

package/dist/types/components/charts/ChartTimeline/timelineTooltip.d.ts

@@ -0,0 +1,45 @@
+import type { ChartTooltipProps } from '../ChartTooltip/index.js';
+import type { ChartTimelineGroup, ChartTimelineMarker, ChartTimelineRow } from './ChartTimeline.js';
+import type { TimelineRange, TimelineSegment } from './timelineLayout.js';
+export interface TimelineMarker extends ChartTimelineMarker {
+    position: number;
+}
+export interface TimelineRowBand extends TimelineRange {
+    row: string;
+    series: string;
+}
+/** O que esta sob o ponteiro. Cada caso carrega o que o balao dele precisa. */
+export type TimelineTarget = {
+    clip: string | undefined;
+    kind: 'segment';
+    row: ChartTimelineRow;
+    segment: TimelineSegment;
+} | {
+    kind: 'marker';
+    marker: TimelineMarker;
+    row: ChartTimelineRow;
+} | {
+    collapsed: boolean;
+    group: ChartTimelineGroup;
+    kind: 'group';
+    rowCount: number;
+    segments: readonly TimelineSegment[];
+} | {
+    /** A linha nao tem intervalo algum, de nenhuma serie. */
+    empty: boolean;
+    kind: 'row';
+    row: ChartTimelineRow;
+    rowBands: readonly TimelineRowBand[];
+    segments: readonly TimelineSegment[];
+};
+export interface TimelineTooltipOptions {
+    colorOf: (series: string) => string | undefined;
+    duration: (range: TimelineRange) => number;
+    emptyRowLabel: string;
+    formatDuration: (durationMs: number) => string;
+    formatInstant: (position: number) => string;
+    seriesOrder: readonly string[];
+    showProgress: boolean;
+}
+export type TimelineTooltip = Omit<ChartTooltipProps, 'children'>;
+export declare function timelineTooltip(target: TimelineTarget | null, options: TimelineTooltipOptions): TimelineTooltip;

package/dist/types/components/charts/core/ChartLegend.d.ts

@@ -12,6 +12,8 @@ export type ChartLegendAlign = 'left' | 'center' | 'right';
 interface ChartLegendProps {
     align?: ChartLegendAlign;
     entries: readonly ChartLegendEntry[];
+    /** Entrada sob o ponteiro ou o foco, para o grafico destacar o que ela representa; `null` ao sair. */
+    onHighlight?: (label: string | null) => void;
     onToggle?: (label: string) => void;
     position: ChartLegendPosition;
     swatch?: ChartLegendSwatch;
@@ -20,5 +22,5 @@ interface ChartLegendProps {
  * Legenda do grafico. Quando existe um alvo para o clique, cada entrada vira um
  * botao que liga e desliga a serie, com o estado exposto por `aria-pressed`.
  */
-export declare function ChartLegend({ align, entries, onToggle, position, swatch, }: ChartLegendProps): import("react").JSX.Element;
+export declare function ChartLegend({ align, entries, onHighlight, onToggle, position, swatch, }: ChartLegendProps): import("react").JSX.Element;
 export {};

package/dist/types/components/data-display/CodeBlock/syntax.d.ts

@@ -3,7 +3,7 @@
  * que ajuda a ler o trecho — palavra reservada, texto, numero, comentario,
  * anotacao, chamada, propriedade, tag e atributo — e deixa o resto sem cor.
  */
-export type CodeSyntax = 'java' | 'javascript' | 'jsx' | 'typescript' | 'tsx' | 'sql' | 'json' | 'shell';
+export type CodeSyntax = 'java' | 'javascript' | 'jsx' | 'typescript' | 'tsx' | 'sql' | 'json' | 'shell' | 'delphi';
 export type CodeTokenKind = 'annotation' | 'attribute' | 'comment' | 'function' | 'keyword' | 'number' | 'property' | 'string' | 'tag';
 export interface CodeToken {
     kind?: CodeTokenKind;

package/dist/types/components/data-display/List/List.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type ListingItem, type ListingSelectionMode } from './useListing.js';
 export type ListSelectionMode = ListingSelectionMode;
-export type ListItem = ListingItem;
+export type ListItem = Omit<ListingItem, 'description' | 'group' | 'icon'>;
 export interface ListProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> {
     children: ReactNode;
     defaultValue?: readonly ListItem[];

package/dist/types/components/data-display/List/useListing.d.ts

@@ -1,8 +1,14 @@
-import { type KeyboardEvent } from 'react';
+import { type KeyboardEvent, type ReactNode } from 'react';
 import { type SelectionStatus } from '../../../hooks/useSelection/index.js';
 export type ListingSelectionMode = 'none' | 'single' | 'multiple';
 export interface ListingItem {
+    /** Segunda linha da opção, como a coleção de um documento. */
+    description?: string;
     disabled?: boolean;
+    /** Título do grupo. As opções seguidas de um mesmo grupo aparecem juntas, sob ele. */
+    group?: string;
+    /** Decorativo, à frente do rótulo: quem nomeia a opção é o rótulo. */
+    icon?: ReactNode;
     label: string;
     value: string;
 }

package/dist/types/components/data-display/Timeline/Timeline.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithRef } from 'react';
+export type TimelineSize = 'sm' | 'md';
 export interface TimelineItem {
     date?: string;
     description?: string;
@@ -11,5 +12,7 @@ export interface TimelineProps extends Omit<ComponentPropsWithRef<'ol'>, 'childr
     items: readonly TimelineItem[];
     /** Nome da lista, para o leitor de tela. */
     label: string;
+    /** `sm` para painéis estreitos: marcador de 16px e rótulo em caption. */
+    size?: TimelineSize;
 }
-export declare function Timeline({ className, current, items, label, ...props }: TimelineProps): import("react").JSX.Element;
+export declare function Timeline({ className, current, items, label, size, ...props }: TimelineProps): import("react").JSX.Element;

package/dist/types/components/data-display/Timeline/index.d.ts

@@ -1,2 +1,2 @@
 export { Timeline } from './Timeline.js';
-export type { TimelineItem, TimelineProps } from './Timeline.js';
+export type { TimelineItem, TimelineProps, TimelineSize } from './Timeline.js';

package/dist/types/components/forms/ComboBox/ComboBox.d.ts

@@ -1,7 +1,13 @@
-import { type ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 export type ComboBoxSize = 'sm' | 'md';
 export interface ComboBoxOption {
+    /** Segunda linha da opção, como a coleção de um documento. A busca local procura só no rótulo. */
+    description?: string;
     disabled?: boolean;
+    /** Título do grupo. As opções seguidas de um mesmo grupo aparecem juntas, sob ele. */
+    group?: string;
+    /** Decorativo, à frente do rótulo. */
+    icon?: ReactNode;
     label: string;
     value: string;
 }

package/dist/types/components/forms/Field/Field.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
-export type FieldSize = 'sm' | 'md';
+export type FieldSize = 'sm' | 'md' | 'lg';
 export interface FieldWiring {
     /** O visual dos campos do sistema para o controle — borda, foco, erro e tamanho. A classe do controle vence a dele. */
     className: string;

package/dist/types/components/forms/InputText/InputText.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithRef, type ReactNode } from 'react';
-export type InputTextSize = 'sm' | 'md';
+export type InputTextSize = 'sm' | 'md' | 'lg';
 export interface InputTextProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
     error?: string;
     hint?: string;

package/dist/types/components/forms/Select/Select.d.ts

@@ -1,7 +1,11 @@
-import { type ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 export type SelectSize = 'sm' | 'md';
 export interface SelectOption {
+    /** Segunda linha da opção, na lista aberta. O nome da opção e o gatilho fechado ficam no rótulo. */
+    description?: string;
     disabled?: boolean;
+    /** Decorativo, à frente do rótulo, na lista aberta. */
+    icon?: ReactNode;
     label: string;
     value: string;
 }