@proef/common-ui 2.6.6 → 2.6.7

package/dist/types/v1/primitives/display/Badge/Badge.d.ts

@@ -16,6 +16,8 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
     icon?: React.ReactNode;
     children: React.ReactNode;
 }
+/** Fundo e texto de cada tom; também os usa o `YearCalendar` para os dias marcados. */
+export declare const BADGE_TONE_CLASSES: Record<BadgeTone, string>;
 /**
  * Etiqueta em pílula: o estado de um registo (ex: "Publicado", "Em atraso") ou
  * uma classificação (ex: a categoria, a origem). As cores dos estados vêm dos

package/dist/types/v1/primitives/display/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+/** Cor do valor: os estados (`ok`, `risco`, `incumprido`) seguem os do `Badge`; `brand` é o azul da marca. */
+export type DescriptionListTone = 'default' | 'brand' | 'ok' | 'risco' | 'incumprido' | 'muted';
+export interface DescriptionListItem {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    tone?: DescriptionListTone;
+    /** Linha de total: valor a negrito, com uma linha por cima. */
+    strong?: boolean;
+    /** Explicação ao passar o rato no rótulo (camada `data-tip` do `TooltipLayer`). */
+    hint?: string;
+}
+export interface DescriptionListProps extends Omit<React.HTMLAttributes<HTMLDListElement>, 'children'> {
+    items: DescriptionListItem[];
+    /** Linhas mais baixas, para listas longas num painel lateral. */
+    dense?: boolean;
+    /** Linha fina entre os itens. */
+    divided?: boolean;
+}
+/**
+ * Lista de rótulo e valor, um por linha (ex: os totais de férias, os dados de um
+ * registo). Para um número de destaque isolado usa-se o `Kpi`.
+ *
+ * Desenha um `<dl>`: os leitores de ecrã leem cada rótulo com o seu valor.
+ *
+ * **Aceita os atributos HTML do `<dl>`** (ex: `id`, `aria-label`).
+ */
+export default function DescriptionList({ items, dense, divided, className, ...props }: DescriptionListProps): React.JSX.Element;
+export { DescriptionList };

package/dist/types/v1/primitives/feedback/Spinner/Spinner.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** `sm` 16px (num botão ou numa linha), `md` 24px, `lg` 40px (página inteira). */
+    size?: SpinnerSize;
+    /** Na linha do texto e na cor dele (ex: dentro de um botão). Sem isto ocupa a largura toda, ao centro, na cor da marca. */
+    inline?: boolean;
+    /** Texto para leitores de ecrã. */
+    label?: string;
+}
+/**
+ * Indicador de "a carregar". Por omissão fica no lugar do bloco que ainda não
+ * chegou (uma tabela, um calendário); com `inline`, dentro de um botão ou de uma frase.
+ *
+ * Substitui o `Spinner` legacy (que é este, com os valores por omissão).
+ *
+ * **Aceita os atributos HTML do `<span>`** (ex: `id`, `className`).
+ */
+export default function Spinner({ size, inline, label, className, ...props }: SpinnerProps): React.JSX.Element;
+export { Spinner };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proef/common-ui",
-  "version": "2.6.6",
+  "version": "2.6.7",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",

package/dist/esm/legacy/components/layout/Spinner/Spinner.css

@@ -1,10 +0,0 @@
-.cui-spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-.cui-spinner .cui-icon {
-  font-size: 1.5rem;
-  color: var(--dark-blue);
-}