@plenustech/design-system 0.2.3 → 0.2.5

package/dist/types/components/navigation/Pagination/Pagination.d.ts

@@ -1,15 +1,27 @@
 import { type ComponentPropsWithRef } from 'react';
+/** Posições, contadas de 1, do primeiro e do último item da página, e o total de itens. */
+export interface PaginationRange {
+    end: number;
+    start: number;
+    total: number;
+}
 export interface PaginationProps extends ComponentPropsWithRef<'nav'> {
     /** Suspende a troca de pagina, como enquanto a pagina pedida carrega. Os botoes continuam focaveis. */
     disabled?: boolean;
+    /** Troca o texto do intervalo, que por padrão é `1.201–1.250 de 4.380`. */
+    formatRange?: (range: PaginationRange) => string;
     label?: string;
     onPageChange: (page: number) => void;
     page: number;
     pageCount: number;
+    /** Itens por página. Com `totalItems`, mostra o intervalo da página atual. */
+    pageSize?: number;
     /** Quantidade de paginas mostradas de cada lado da atual. */
     siblings?: number;
+    /** Total de itens. Com `pageSize`, mostra o intervalo da página atual. */
+    totalItems?: number;
 }
-export declare function Pagination({ className, disabled, label, onPageChange, page, pageCount, siblings, ...props }: PaginationProps): import("react").JSX.Element | null;
+export declare function Pagination({ className, disabled, formatRange, label, onPageChange, page, pageCount, pageSize, siblings, totalItems, ...props }: PaginationProps): import("react").JSX.Element | null;
 /**
  * Primeira e ultima pagina sempre visiveis; null representa a reticencia. A faixa tem sempre as mesmas vagas: perto
  * da ponta a janela encosta nela em vez de encolher, e reticencia nunca esconde uma pagina so.

package/dist/types/components/navigation/Pagination/index.d.ts

@@ -1,2 +1,2 @@
 export { Pagination } from './Pagination.js';
-export type { PaginationProps } from './Pagination.js';
+export type { PaginationProps, PaginationRange } from './Pagination.js';

package/dist/types/components/navigation/TabsNav/TabsNav.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+export interface TabsNavItem {
+    href?: string;
+    key: string;
+    label: string;
+    /** Propriedades entregues inteiras ao componente de link, para o roteador que não usa `href`. */
+    linkProps?: Record<string, unknown>;
+}
+export interface TabsNavProps extends Omit<ComponentPropsWithRef<'nav'>, 'aria-label'> {
+    /** Componente de link da aplicação, para não acoplar o sistema a um roteador. */
+    as?: ElementType;
+    /** Chave da aba do endereço atual. */
+    current: string;
+    /** As abas dividem a largura em partes iguais, em vez de ficar do tamanho do rótulo. */
+    fitted?: boolean;
+    items: readonly TabsNavItem[];
+    label: string;
+}
+/** Abas que são endereços: cada uma é um link, e a da página atual leva `aria-current="page"`. */
+export declare function TabsNav({ as: Link, className, current, fitted, items, label, ...props }: TabsNavProps): import("react").JSX.Element;

package/dist/types/components/navigation/TabsNav/index.d.ts

@@ -0,0 +1,2 @@
+export { TabsNav } from './TabsNav.js';
+export type { TabsNavItem, TabsNavProps } from './TabsNav.js';

package/dist/types/components/overlays/Dialog/Dialog.d.ts

@@ -1,19 +1,31 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
 export type DialogSize = 'sm' | 'md' | 'lg';
 export type DialogRole = 'dialog' | 'alertdialog';
-/** As propriedades nativas vao ao elemento do dialogo; o `className` soma ao do sistema. */
-export interface DialogProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'role' | 'title'> {
+/** O que o `Dialog` e o `Drawer` compartilham. As propriedades nativas vao ao elemento do dialogo. */
+export interface DialogBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'aria-label' | 'children' | 'role' | 'title'> {
     children?: ReactNode;
-    description?: string;
     dismissable?: boolean;
     footer?: ReactNode;
-    /** Opcional. Desenhado ao lado do titulo, fora da leitura: quem fala e o titulo. */
-    icon?: ReactNode;
     onClose: () => void;
     open: boolean;
+}
+export interface DialogTitledProps {
+    'aria-label'?: never;
+    description?: string;
+    /** Opcional. Desenhado ao lado do titulo, fora da leitura: quem fala e o titulo. */
+    icon?: ReactNode;
+    title: string;
+}
+/** Sem titulo, sem cabecalho: o nome vem do `aria-label`, como na paleta de busca. Esc continua fechando. */
+export interface DialogUntitledProps {
+    'aria-label': string;
+    description?: never;
+    icon?: never;
+    title?: never;
+}
+export type DialogProps = DialogBaseProps & (DialogTitledProps | DialogUntitledProps) & {
     /** `alertdialog` para a confirmacao que interrompe e exige resposta, como a de uma acao destrutiva. */
     role?: DialogRole;
     size?: DialogSize;
-    title: string;
-}
+};
 export declare function Dialog({ size, ...props }: DialogProps): import("react").JSX.Element;

package/dist/types/components/overlays/Dialog/DialogFrame.d.ts

@@ -1,6 +1,12 @@
-import type { DialogProps } from './Dialog.js';
-export interface DialogFrameProps extends Omit<DialogProps, 'size'> {
+import { type ReactNode } from 'react';
+import type { DialogBaseProps, DialogRole } from './Dialog.js';
+export interface DialogFrameProps extends DialogBaseProps {
+    'aria-label'?: string;
+    description?: string;
+    icon?: ReactNode;
+    role?: DialogRole;
     surfaceClassName: string;
+    title?: string;
     underlayClassName: string;
 }
 /** Mecanica modal do `Dialog` e do `Drawer`: portal, foco preso, rolagem travada, cabecalho, corpo e rodape. Interna. */

package/dist/types/components/overlays/Drawer/Drawer.d.ts

@@ -1,7 +1,7 @@
-import type { DialogProps } from '../Dialog/index.js';
+import type { DialogBaseProps, DialogTitledProps } from '../Dialog/Dialog.js';
 export type DrawerSide = 'left' | 'right';
 export type DrawerSize = 'sm' | 'md' | 'lg';
-export interface DrawerProps extends Omit<DialogProps, 'icon' | 'role' | 'size'> {
+export interface DrawerProps extends DialogBaseProps, Omit<DialogTitledProps, 'icon'> {
     side?: DrawerSide;
     size?: DrawerSize;
 }

package/dist/types/components/overlays/Menu/Menu.d.ts

@@ -8,8 +8,10 @@ export interface MenuItem {
     key: string;
     label: string;
     onSelect?: () => void;
-    /** Atalho escrito a direita, como `Ctrl+D`, e anunciado em `aria-keyshortcuts`. */
+    /** Atalho escrito à direita, como `Ctrl+D` ou `⌘⇧D`; convertido nos nomes de tecla de `aria-keyshortcuts`. */
     shortcut?: string;
+    /** Valor de `aria-keyshortcuts` quando a conversão do `shortcut` não basta, como `Control+Shift+D Meta+Shift+D`. */
+    shortcutKeys?: string;
     /** `danger` para a acao que destroi, como remover. */
     tone?: 'danger';
 }

package/dist/types/components/overlays/Menu/keyShortcuts.d.ts

@@ -0,0 +1,2 @@
+/** Converte o atalho escrito, como `Ctrl+Shift+D` ou `⌘K, Ctrl+K`, no valor de `aria-keyshortcuts`. */
+export declare function toAriaKeyShortcuts(shortcut: string): string;

package/dist/types/components/overlays/Tooltip/Tooltip.d.ts

@@ -1,9 +1,30 @@
-import { type ReactElement, type ReactNode } from 'react';
+import { type ReactElement, type ReactNode, type RefObject } from 'react';
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
-export interface TooltipProps {
-    children: ReactElement<Record<string, unknown>>;
+interface TooltipCommonProps {
     content: ReactNode;
-    delay?: number;
+    /** Avisa cada pedido de abrir ou fechar: ponteiro, foco, blur e Escape. */
+    onOpenChange?: (open: boolean) => void;
     placement?: TooltipPlacement;
 }
-export declare function Tooltip({ children, content, delay, placement }: TooltipProps): import("react").JSX.Element;
+interface TooltipOnChildProps extends TooltipCommonProps {
+    anchorRef?: never;
+    /** O gatilho: o Tooltip o clona, soma os manipuladores e liga a descrição por `aria-describedby`. */
+    children: ReactElement<Record<string, unknown>>;
+    delay?: number;
+    id?: never;
+    /** Controla a abertura; sem ele, o Tooltip guarda o próprio estado. */
+    open?: boolean;
+}
+interface TooltipOnAnchorProps extends TooltipCommonProps {
+    /** Âncora que não é filho do Tooltip, como um elemento que precisa da própria referência e não pode ser clonado. */
+    anchorRef: RefObject<HTMLElement | null>;
+    children?: never;
+    delay?: never;
+    /** Id do balão. O produto o põe no `aria-describedby` da âncora enquanto `open`. */
+    id: string;
+    /** Com âncora externa, a abertura é sempre do produto. */
+    open: boolean;
+}
+export type TooltipProps = TooltipOnChildProps | TooltipOnAnchorProps;
+export declare function Tooltip(props: TooltipProps): import("react").JSX.Element;
+export {};

package/dist/types/icons.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Suite completa do Bootstrap Icons, pelo nome do desenho: `@plenustech/design-system/icons`. Fica fora do ponto de
+ * entrada principal para o autocompletar e as declaracoes dele continuarem leves; o bundle leva so os importados.
+ */
+export * from './components/icons/suite.js';
+export type { IconProps } from './components/icons/Icon.js';

package/dist/types/index.d.ts

@@ -52,10 +52,12 @@ export { Popover } from './components/overlays/Popover/index.js';
 export type { PopoverProps, PopoverPlacement } from './components/overlays/Popover/index.js';
 export { Tabs } from './components/navigation/Tabs/index.js';
 export type { TabsProps, TabItem, TabsOrientation } from './components/navigation/Tabs/index.js';
+export { TabsNav } from './components/navigation/TabsNav/index.js';
+export type { TabsNavItem, TabsNavProps } from './components/navigation/TabsNav/index.js';
 export { Breadcrumb } from './components/navigation/Breadcrumb/index.js';
 export type { BreadcrumbProps, BreadcrumbItem } from './components/navigation/Breadcrumb/index.js';
 export { Pagination } from './components/navigation/Pagination/index.js';
-export type { PaginationProps } from './components/navigation/Pagination/index.js';
+export type { PaginationProps, PaginationRange } from './components/navigation/Pagination/index.js';
 export { SkipLink } from './components/navigation/SkipLink/index.js';
 export type { SkipLinkProps } from './components/navigation/SkipLink/index.js';
 export { Steps } from './components/navigation/Steps/index.js';
@@ -88,7 +90,7 @@ export { CodeBlock } from './components/data-display/CodeBlock/index.js';
 export { SortableList } from './components/data-display/SortableList/index.js';
 export type { SortableListItem, SortableListProps } from './components/data-display/SortableList/index.js';
 export { Timeline } from './components/data-display/Timeline/index.js';
-export type { TimelineItem, TimelineProps } from './components/data-display/Timeline/index.js';
+export type { TimelineItem, TimelineProps, TimelineSize } from './components/data-display/Timeline/index.js';
 export type { CodeBlockProps, CodeSyntax } from './components/data-display/CodeBlock/index.js';
 export { Table } from './components/data-display/Table/index.js';
 export type { SortDirection, TableAlign, TableBodyProps, TableBreakpoint, TableCellProps, TableColumnProps, TableHeaderProps, TableProps, TableRowItem, TableRowProps, TableSelectionControl, TableSelectionMode, TableSize, TableSort, } from './components/data-display/Table/index.js';
@@ -98,12 +100,18 @@ export { TimePicker } from './components/forms/TimePicker/index.js';
 export type { TimePickerProps, TimePickerSize } from './components/forms/TimePicker/index.js';
 export { DateTimePicker } from './components/forms/DateTimePicker/index.js';
 export type { DateTimePickerProps, DateTimePickerSize } from './components/forms/DateTimePicker/index.js';
-export { formatarData, formatarHora, formatarMoeda, formatarNumero, formatarPercentual, formatarTamanhoDeArquivo, } from './utils/formatters/index.js';
+export { formatarData, formatarDuracao, formatarHora, formatarMoeda, formatarNumero, formatarPercentual, formatarTamanhoDeArquivo, } from './utils/formatters/index.js';
 export type { Compacto, OpcoesDeData, OpcoesDeHora, OpcoesDeMoeda, OpcoesDeNumero, OpcoesDePercentual, OpcoesDeTamanhoDeArquivo, } from './utils/formatters/index.js';
 export { ChartBar } from './components/charts/ChartBar/index.js';
 export type { ChartBarOrientation, ChartBarProps, ChartBarSeries } from './components/charts/ChartBar/index.js';
 export { ChartLine } from './components/charts/ChartLine/index.js';
 export type { ChartLineProps, ChartLineSeries } from './components/charts/ChartLine/index.js';
+export { ChartGauge } from './components/charts/ChartGauge/index.js';
+export type { ChartGaugeDelta, ChartGaugeIndicator, ChartGaugeProps, ChartGaugeScaleLabels, ChartGaugeSegment, ChartGaugeSegmentStyle, ChartGaugeSegmentUnit, ChartGaugeSize, ChartGaugeTarget, ChartGaugeTicks, ChartGaugeValueDisplay, } from './components/charts/ChartGauge/index.js';
+export { ChartMap } from './components/charts/ChartMap/index.js';
+export type { ChartMapCategory, ChartMapColorScale, ChartMapFeature, ChartMapFeatureCollection, ChartMapLegendPosition, ChartMapMarker, ChartMapMarkerEvent, ChartMapMarkerSeries, ChartMapProps, ChartMapRegion, ChartMapRegionDatum, } from './components/charts/ChartMap/index.js';
+export { ChartTimeline } from './components/charts/ChartTimeline/index.js';
+export type { ChartTimelineBand, ChartTimelineDensity, ChartTimelineGroup, ChartTimelineLabelAlign, ChartTimelineMarker, ChartTimelineMarkerShape, ChartTimelineOverlap, ChartTimelineProps, ChartTimelineReferenceLine, ChartTimelineRow, ChartTimelineRowBand, ChartTimelineScale, ChartTimelineSegment, ChartTimelineSegmentLabelContent, ChartTimelineSegmentLabels, ChartTimelineSeries, ChartTimelineState, ChartTimelineSummary, ChartTimelineTime, } from './components/charts/ChartTimeline/index.js';
 export { ChartTooltip } from './components/charts/ChartTooltip/index.js';
 export type { ChartTooltipColumn, ChartTooltipComputed, ChartTooltipProps, ChartTooltipRow, ChartTooltipTotal, } from './components/charts/ChartTooltip/index.js';
 export { ChartCombo } from './components/charts/ChartCombo/index.js';

package/dist/types/utils/formatters/formatarDuracao.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Duracao em horas e minutos, arredondada ao minuto: `10h16m`, `1h05m`, `48m`, `12h`. Recebe milissegundos.
+ * Duracao em dias fica com quem a exibe: um prazo de projeto e lido em dias, uma jornada nao.
+ */
+export declare function formatarDuracao(milissegundos: number): string;

package/dist/types/utils/formatters/index.d.ts

@@ -1,6 +1,7 @@
 export { formatarEdicaoDecimal, formatarEntradaDecimal } from './formatarEntradaDecimal.js';
 export { formatarEntradaMonetaria } from './formatarEntradaMonetaria.js';
 export { formatarData, formatarHora } from './formatarData.js';
+export { formatarDuracao } from './formatarDuracao.js';
 export type { OpcoesDeData, OpcoesDeHora } from './formatarData.js';
 export { formatarMoeda, formatarNumero, formatarPercentual } from './formatarNumero.js';
 export type { Compacto, OpcoesDeMoeda, OpcoesDeNumero, OpcoesDePercentual } from './formatarNumero.js';

package/dist/utils/formatters/formatarDuracao.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=6e4;function e(t){if(!Number.isFinite(t)||t<0)return"";const a=Math.round(t/n),r=Math.floor(a/60),o=a%60;return r===0?`${o}m`:o===0?`${r}h`:`${r}h${String(o).padStart(2,"0")}m`}exports.formatarDuracao=e;
+//# sourceMappingURL=formatarDuracao.cjs.map

package/dist/utils/formatters/formatarDuracao.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatarDuracao.cjs","sources":["../../../src/utils/formatters/formatarDuracao.ts"],"sourcesContent":["const MINUTO = 60_000;\n\n/**\n * Duracao em horas e minutos, arredondada ao minuto: `10h16m`, `1h05m`, `48m`, `12h`. Recebe milissegundos.\n * Duracao em dias fica com quem a exibe: um prazo de projeto e lido em dias, uma jornada nao.\n */\nexport function formatarDuracao(milissegundos: number) {\n  if (!Number.isFinite(milissegundos) || milissegundos < 0) {\n    return '';\n  }\n\n  const minutos = Math.round(milissegundos / MINUTO);\n  const horas = Math.floor(minutos / 60);\n  const resto = minutos % 60;\n\n  if (horas === 0) {\n    return `${resto}m`;\n  }\n\n  return resto === 0 ? `${horas}h` : `${horas}h${String(resto).padStart(2, '0')}m`;\n}\n"],"names":["MINUTO","formatarDuracao","milissegundos","minutos","horas","resto"],"mappings":"gFAAA,MAAMA,EAAS,IAMR,SAASC,EAAgBC,EAAuB,CACrD,GAAI,CAAC,OAAO,SAASA,CAAa,GAAKA,EAAgB,EACrD,MAAO,GAGT,MAAMC,EAAU,KAAK,MAAMD,EAAgBF,CAAM,EAC3CI,EAAQ,KAAK,MAAMD,EAAU,EAAE,EAC/BE,EAAQF,EAAU,GAExB,OAAIC,IAAU,EACL,GAAGC,CAAK,IAGVA,IAAU,EAAI,GAAGD,CAAK,IAAM,GAAGA,CAAK,IAAI,OAAOC,CAAK,EAAE,SAAS,EAAG,GAAG,CAAC,GAC/E"}

package/dist/utils/formatters/formatarDuracao.js

@@ -0,0 +1,10 @@
+function a(t) {
+  if (!Number.isFinite(t) || t < 0)
+    return "";
+  const n = Math.round(t / 6e4), r = Math.floor(n / 60), o = n % 60;
+  return r === 0 ? `${o}m` : o === 0 ? `${r}h` : `${r}h${String(o).padStart(2, "0")}m`;
+}
+export {
+  a as formatarDuracao
+};
+//# sourceMappingURL=formatarDuracao.js.map

package/dist/utils/formatters/formatarDuracao.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatarDuracao.js","sources":["../../../src/utils/formatters/formatarDuracao.ts"],"sourcesContent":["const MINUTO = 60_000;\n\n/**\n * Duracao em horas e minutos, arredondada ao minuto: `10h16m`, `1h05m`, `48m`, `12h`. Recebe milissegundos.\n * Duracao em dias fica com quem a exibe: um prazo de projeto e lido em dias, uma jornada nao.\n */\nexport function formatarDuracao(milissegundos: number) {\n  if (!Number.isFinite(milissegundos) || milissegundos < 0) {\n    return '';\n  }\n\n  const minutos = Math.round(milissegundos / MINUTO);\n  const horas = Math.floor(minutos / 60);\n  const resto = minutos % 60;\n\n  if (horas === 0) {\n    return `${resto}m`;\n  }\n\n  return resto === 0 ? `${horas}h` : `${horas}h${String(resto).padStart(2, '0')}m`;\n}\n"],"names":["formatarDuracao","milissegundos","minutos","horas","resto"],"mappings":"AAMO,SAASA,EAAgBC,GAAuB;AACrD,MAAI,CAAC,OAAO,SAASA,CAAa,KAAKA,IAAgB;AACrD,WAAO;AAGT,QAAMC,IAAU,KAAK,MAAMD,IAAgB,GAAM,GAC3CE,IAAQ,KAAK,MAAMD,IAAU,EAAE,GAC/BE,IAAQF,IAAU;AAExB,SAAIC,MAAU,IACL,GAAGC,CAAK,MAGVA,MAAU,IAAI,GAAGD,CAAK,MAAM,GAAGA,CAAK,IAAI,OAAOC,CAAK,EAAE,SAAS,GAAG,GAAG,CAAC;AAC/E;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plenustech/design-system",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Design System centralizado para os produtos web da Plenustech.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -20,6 +20,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./icons": {
+      "types": "./dist/types/icons.d.ts",
+      "import": "./dist/icons.js",
+      "require": "./dist/icons.cjs"
+    },
     "./styles.css": {
       "types": "./dist/folha.d.ts",
       "default": "./dist/design-system.css"
@@ -41,6 +46,7 @@
     "dev:showcase": "vite --config showcase/vite.config.ts",
     "build": "tsc -b && vite build && tsc -p tsconfig.build.json && node scripts/finaliza-pacote.mjs",
     "check:pacote": "node scripts/check-pacote.mjs",
+    "gerar:icones": "node scripts/gerar-icones.mjs",
     "check:contraste": "node scripts/check-contraste.mjs",
     "prepare": "npm run build:pacote",
     "build:showcase": "npm run build:pacote && vite build --config showcase/vite.config.ts",
@@ -57,6 +63,7 @@
     "@react-aria/overlays": "^3.32.1",
     "@types/d3-scale": "^4.0.9",
     "d3-array": "^3.2.4",
+    "d3-geo": "^3.1.1",
     "d3-hierarchy": "^3.1.2",
     "d3-sankey": "^0.12.3",
     "d3-scale": "^4.0.2",
@@ -70,6 +77,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/d3-array": "^3.2.2",
+    "@types/d3-geo": "^3.1.0",
     "@types/d3-hierarchy": "^3.1.7",
     "@types/d3-sankey": "^0.12.5",
     "@types/d3-shape": "^3.2.0",
@@ -77,6 +85,7 @@
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
+    "bootstrap-icons": "1.11.3",
     "jsdom": "^26.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",