@abyss-project/commons-front-core 9.2.0 → 9.3.1

package/README.md

@@ -90,6 +90,34 @@ export const buildRumOptions = () =>
 
 ## Changements visibles
 
+### 9.3.0
+
+Pages des outils du front principal sur le design system (carte #286, zone 4a). Pièces nouvelles et évolutions,
+chacune documentée dans le `README.md` de son dossier et montrée dans le catalogue.
+
+- **`BarChart`** (`data`) : barres Nivo sous `abyssNivoTheme`, groupées ou empilées (`stacked`), verticales ou
+  horizontales (`BarChartLayout`) ; une série par `id`, une catégorie par groupe, une clé absente n'est pas une barre ;
+  infobulle à la valeur propre de la série ; légende au-delà d'une série ; figure nommée et tableau des valeurs pour
+  les lecteurs d'écran ; « Aucune donnée à afficher » sans valeur. Graduations de l'axe des catégories selon la
+  largeur mesurée. Remplace `AbyssBarChart`.
+- **Ton sémantique des séries** (`data`) : `ChartSeriesTone` (`Success`, `Warning`, `Danger`, `Info`, `Neutral`) et
+  `seriesColorTokens`, partagés par `LineChart` et `BarChart`. Une série à ton prend le jeton `status.*` de son ton ;
+  les séries sans ton gardent la palette `data.series.*` dans leur ordre (ADR-0174, avenant 9.3.0).
+- **`LineChart`** (`data`) : `tone` par série et `stacked` (aires empilées depuis zéro, une abscisse absente d'une
+  série comptée à zéro ; infobulle et tableau gardent les valeurs propres). Le reste du contrat 9.2.0 est inchangé.
+- **`AmbientBackground`** (`structure`) : fond de décor animé et sobre (lueurs d'`accent` et de `data.series.5` en
+  `color-mix` sur les variables `--abyss-*`), `aria-hidden`, hors du flux, `Viewport` ou `Container` ; figé sous
+  `prefers-reduced-motion`, sous 768 px et avec `paused`, état exposé par `data-motion`. Remplace `WaterParticles`.
+- **`ConfirmDialogTone.Warning`** (`layers`) : bouton en `status.warning`, texte dans l'encre `paper`/`paper.on` la
+  plus contrastée, focus initial sur « Annuler » ; accepté par `useConfirmDialog`.
+- **`DataTable`** (`data`) : `label` facultatif, nom accessible de la table et de la liste mobile.
+- **Palette de choix** (`theme`) : `CHOICE_SWATCHES`, douze teintes catégorielles (une tous les 30° depuis la teinte
+  de marque, `0.72 0.12` en OKLCH), valeurs hexadécimales stables, lisibles sous l'encre `paper.on` à 4,5:1 au moins
+  dans les deux thèmes. **`ColorField`** les propose quand l'hôte ne passe pas `swatches` (devenu facultatif).
+- **Utilitaires sortis de `legacy/`** : `getFileIcon` et `getFileColor` sont exportés de la racine ; `getFileColor`
+  y rend une couleur des jetons, `var(--abyss-data-series-n)` ou `var(--abyss-text-muted)`.
+- **Traductions** : clés `ds.data.bar-chart.*` (FR et EN).
+
 ### 9.2.0
 
 Organisation et projet du front principal sur le design system (carte #286, zone 3). Pièces nouvelles et évolutions,

package/catalog/catalog-entries.ts

@@ -52,6 +52,9 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('FilterBar', 'structure', 'filter-bar', RESPONSIVE),
   entry('SplitView', 'structure', 'split-view', RESPONSIVE),
   entry('Tabs', 'structure', 'tabs', RESPONSIVE),
+  entry('AmbientBackground', 'structure', 'ambient-background', {
+    mobileCapture: true,
+  }),
   entry('NotificationsMenu', 'structure', 'notifications-menu', {
     mobileCapture: true,
   }),
@@ -68,6 +71,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('Sparkline', 'data', 'sparkline'),
   entry('Pagination', 'data', 'pagination', RESPONSIVE),
   entry('LineChart', 'data', 'line-chart'),
+  entry('BarChart', 'data', 'bar-chart'),
   entry('ChartTheme', 'data', 'chart-theme'),
   entry('UsageMeter', 'data', 'usage-meter'),
   entry('StatusBadge', 'meaning', 'status-badge'),
@@ -87,6 +91,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('QRCodeModal', 'business', 'qr-code-modal', { mobileCapture: true }),
   entry('Modal', 'layers', 'modal', { mobileCapture: true }),
   entry('ConfirmDialog', 'layers', 'confirm-dialog'),
+  entry('ConfirmDialogWarning', 'layers', 'confirm-dialog-warning'),
   entry('Drawer', 'layers', 'drawer'),
   entry('Menu', 'layers', 'menu'),
   entry('Toast', 'layers', 'toast'),

package/catalog/pages/AmbientBackground.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+import {
+  AmbientBackground,
+  AmbientBackgroundPlacement,
+} from '../../src/components/structure/AmbientBackground/AmbientBackground';
+import { hairline, px } from '../../src/theme/components/shared';
+import { Example, Showcase } from '../frame';
+
+/** A panel the background stops at: positioned, clipped, as a host lays it out. */
+const Panel = styled('div')(({ theme }) => {
+  const { tokens, space, radii, typeScale } = theme.design;
+  return {
+    position: 'relative',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap: px(space[3]),
+    minHeight: px(space[10] * 4),
+    padding: px(space[6]),
+    backgroundColor: tokens['bg.canvas'],
+    border: hairline(tokens['border.subtle']),
+    borderRadius: px(radii.md),
+    color: tokens['text.primary'],
+    fontSize: px(typeScale.body),
+  };
+});
+
+/** The content of a panel, laid above its background. */
+const Content = styled('div')(({ theme }) => ({
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: px(theme.design.space[2]),
+}));
+
+const Title = styled('strong')(({ theme }) => ({
+  fontSize: px(theme.design.typeScale.sectionTitle),
+}));
+
+const PausableScanner = () => {
+  const [scanning, setScanning] = useState(true);
+  return (
+    <Panel>
+      <AmbientBackground
+        placement={AmbientBackgroundPlacement.Container}
+        paused={!scanning}
+      />
+      <Content>
+        <Title>{scanning ? 'Analyse en cours…' : 'Analyse terminée'}</Title>
+        <Button variant="outlined" onClick={() => setScanning(!scanning)}>
+          {scanning ? 'Figer le fond' : 'Relancer le fond'}
+        </Button>
+      </Content>
+    </Panel>
+  );
+};
+
+export const AmbientBackgroundPage = () => (
+  <Showcase
+    family="Structure"
+    name="AmbientBackground"
+    description="Fond de décor : lueurs d'accent et de data.series.5 qui dérivent lentement sous le contenu, masquées aux lecteurs d'écran, figées sous prefers-reduced-motion, sous 768 px et en pause."
+  >
+    <Example title="Dans un panneau (placement Container)">
+      <Panel>
+        <AmbientBackground placement={AmbientBackgroundPlacement.Container} />
+        <Content>
+          <Title>Envoyez vos fichiers avec Beam</Title>
+          <span>Le fond reste sous le contenu et ne prend aucun clic.</span>
+        </Content>
+      </Panel>
+    </Example>
+    <Example title="En pause : le scanner de Probe entre deux analyses">
+      <PausableScanner />
+    </Example>
+  </Showcase>
+);

package/catalog/pages/BarChart.tsx

@@ -0,0 +1,127 @@
+import {
+  BarChart,
+  BarChartLayout,
+} from '../../src/components/data/BarChart/BarChart';
+import type {
+  BarChartCategory,
+  BarChartSeries,
+} from '../../src/components/data/BarChart/BarChart';
+import { ChartSeriesTone } from '../../src/components/data/chart-series-tone';
+import { Surface } from '../../src/components/structure/Surface/Surface';
+import { Example, Showcase } from '../frame';
+
+const count = new Intl.NumberFormat('fr-FR');
+const seconds = new Intl.NumberFormat('fr-FR', {
+  style: 'unit',
+  unit: 'second',
+  maximumFractionDigits: 1,
+});
+
+const DURATION: BarChartSeries[] = [{ id: 'duration', label: 'Durée moyenne' }];
+
+const CONFIGS: BarChartCategory[] = [
+  { id: 'invoice', label: 'Factures', values: { duration: 4.2 } },
+  { id: 'receipt', label: 'Reçus', values: { duration: 2.8 } },
+  { id: 'payslip', label: 'Bulletins de paie', values: { duration: 6.1 } },
+  { id: 'id-card', label: 'Pièces d’identité', values: { duration: 3.4 } },
+  { id: 'bank', label: 'Relevés bancaires', values: { duration: 7.9 } },
+];
+
+const OUTCOMES: BarChartSeries[] = [
+  { id: 'succeeded', label: 'Réussies', tone: ChartSeriesTone.Success },
+  { id: 'failed', label: 'Échouées', tone: ChartSeriesTone.Danger },
+];
+
+const OUTCOMES_BY_CONFIG: BarChartCategory[] = [
+  { id: 'invoice', label: 'Factures', values: { succeeded: 412, failed: 9 } },
+  { id: 'receipt', label: 'Reçus', values: { succeeded: 268, failed: 21 } },
+  { id: 'payslip', label: 'Bulletins', values: { succeeded: 133 } },
+  { id: 'id-card', label: 'Identité', values: { succeeded: 96, failed: 14 } },
+  { id: 'bank', label: 'Relevés', values: { succeeded: 57, failed: 3 } },
+];
+
+const TOOLS: BarChartSeries[] = ['Atlas', 'Board', 'Draw'].map((label) => ({
+  id: label.toLowerCase(),
+  label,
+}));
+
+const MONTHS = [
+  'Jan.',
+  'Fév.',
+  'Mars',
+  'Avr.',
+  'Mai',
+  'Juin',
+  'Juil.',
+  'Août',
+  'Sept.',
+  'Oct.',
+  'Nov.',
+  'Déc.',
+];
+
+const BY_MONTH: BarChartCategory[] = MONTHS.map((label, month) => ({
+  id: `m${month + 1}`,
+  label,
+  values: Object.fromEntries(
+    TOOLS.map(({ id }, index) => [
+      id,
+      12 + index * 6 + Math.round(8 * Math.sin((month + index) / 2)),
+    ]),
+  ),
+}));
+
+export const BarChartPage = () => (
+  <Showcase
+    family="Données"
+    name="BarChart"
+    description="Barres Nivo sous abyssNivoTheme, groupées ou empilées, verticales ou horizontales : palette data.series ou ton status.* quand la série porte un sens, légende au-delà d'une série, figure nommée et tableau des valeurs pour les lecteurs d'écran."
+  >
+    <Example title="Une série, horizontale">
+      <Surface padding={4}>
+        <BarChart
+          series={DURATION}
+          categories={CONFIGS}
+          height={220}
+          layout={BarChartLayout.Horizontal}
+          formatValue={(value) => seconds.format(value)}
+          label="Durée moyenne d’une extraction par configuration"
+        />
+      </Surface>
+    </Example>
+    <Example title="Empilées, séries à ton (réussites et échecs)">
+      <Surface padding={4}>
+        <BarChart
+          series={OUTCOMES}
+          categories={OUTCOMES_BY_CONFIG}
+          height={240}
+          stacked
+          formatValue={(value) => count.format(value)}
+          label="Extractions réussies et échouées par configuration"
+        />
+      </Surface>
+    </Example>
+    <Example title="Groupées, palette de séries, douze catégories">
+      <Surface padding={4}>
+        <BarChart
+          series={TOOLS}
+          categories={BY_MONTH}
+          height={240}
+          formatValue={(value) => count.format(value)}
+          label="Contenus créés par outil et par mois"
+        />
+      </Surface>
+    </Example>
+    <Example title="Aucune donnée">
+      <Surface padding={4}>
+        <BarChart
+          series={DURATION}
+          categories={[]}
+          height={160}
+          formatValue={(value) => seconds.format(value)}
+          label="Durée moyenne d’une extraction par configuration"
+        />
+      </Surface>
+    </Example>
+  </Showcase>
+);

package/catalog/pages/ConfirmDialogWarning.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import {
+  ConfirmDialog,
+  ConfirmDialogTone,
+} from '../../src/components/layers/ConfirmDialog/ConfirmDialog';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+export const ConfirmDialogWarningPage = () => {
+  const { log } = useEventLog();
+  const [open, setOpen] = useState(true);
+  return (
+    <Showcase
+      family="Couches"
+      name="ConfirmDialog — ton Warning"
+      description="Confirmation d'une action permise mais risquée : bouton en status.warning, texte dans l'encre paper la plus contrastée, focus initial sur « Annuler »."
+    >
+      <Example title="Télécharger un fichier encore en analyse">
+        <Button
+          variant="outlined"
+          color="warning"
+          onClick={() => setOpen(true)}
+        >
+          Télécharger contrat-2026.pdf
+        </Button>
+      </Example>
+      <LastEvent />
+      <ConfirmDialog
+        open={open}
+        tone={ConfirmDialogTone.Warning}
+        title="Télécharger un fichier en cours d’analyse ?"
+        body="L’analyse antivirus de contrat-2026.pdf n’est pas terminée : rien ne garantit encore que le fichier est sain."
+        confirmLabel="Télécharger quand même"
+        onConfirm={() => {
+          setOpen(false);
+          log('télécharger');
+        }}
+        onCancel={() => {
+          setOpen(false);
+          log('annuler');
+        }}
+      />
+    </Showcase>
+  );
+};

package/catalog/pages/LineChart.tsx

@@ -3,6 +3,7 @@ import type {
   LineChartSeries,
   LineChartX,
 } from '../../src/components/data/LineChart/LineChart';
+import { ChartSeriesTone } from '../../src/components/data/chart-series-tone';
 import { Surface } from '../../src/components/structure/Surface/Surface';
 import { Example, Showcase } from '../frame';
 
@@ -27,12 +28,16 @@ const hourly = (
   id: string,
   label: string,
   values: number[],
+  tone?: ChartSeriesTone,
 ): LineChartSeries => ({
   id,
   label,
   points: values.map((y, hour) => ({ x: atHour(hour), y })),
+  tone,
 });
 
+const DELIVERED = REQUESTS.map((value, hour) => value - ERRORS[hour]);
+
 const SIX_SERIES: LineChartSeries[] = [
   'Atlas',
   'Board',
@@ -64,7 +69,7 @@ export const LineChartPage = () => (
   <Showcase
     family="Données"
     name="LineChart"
-    description="Courbes Nivo sous abyssNivoTheme : couleurs prises dans l'ordre de la palette data.series, légende au-delà d'une série, figure nommée et tableau des valeurs pour les lecteurs d'écran."
+    description="Courbes Nivo sous abyssNivoTheme : couleurs prises dans l'ordre de la palette data.series, ou dans status.* pour une série à ton ; aires empilées avec stacked ; légende au-delà d'une série, figure nommée et tableau des valeurs pour les lecteurs d'écran."
   >
     <Example title="Une série, aire">
       <Surface padding={4}>
@@ -92,6 +97,21 @@ export const LineChartPage = () => (
         />
       </Surface>
     </Example>
+    <Example title="Empilées, séries à ton (délivrés et échecs)">
+      <Surface padding={4}>
+        <LineChart
+          series={[
+            hourly('delivered', 'Délivrés', DELIVERED, ChartSeriesTone.Success),
+            hourly('failed', 'Échecs', ERRORS, ChartSeriesTone.Danger),
+          ]}
+          height={240}
+          stacked
+          formatX={formatHour}
+          formatY={(y) => count.format(y)}
+          label="Webhooks délivrés et en échec par heure"
+        />
+      </Surface>
+    </Example>
     <Example title="Palette des six séries">
       <Surface padding={4}>
         <LineChart

package/catalog/pages/index.ts

@@ -1,8 +1,10 @@
 import type { ComponentType } from 'react';
 import { AccountMenuPage } from './AccountMenu';
 import { ActionBarPage } from './ActionBar';
+import { AmbientBackgroundPage } from './AmbientBackground';
 import { AppShellPage } from './AppShell';
 import { AvatarPage } from './Avatar';
+import { BarChartPage } from './BarChart';
 import { BottomSheetPage } from './BottomSheet';
 import { CalloutPage } from './Callout';
 import { ChartThemePage } from './ChartTheme';
@@ -10,6 +12,7 @@ import { CloudImportPage } from './CloudImport';
 import { ColorFieldPage } from './ColorField';
 import { CommandPalettePage } from './CommandPalette';
 import { ConfirmDialogPage } from './ConfirmDialog';
+import { ConfirmDialogWarningPage } from './ConfirmDialogWarning';
 import { ContextSelectorPage } from './ContextSelector';
 import { CopyFieldPage } from './CopyField';
 import { LineChartPage } from './LineChart';
@@ -65,8 +68,10 @@ import { UsageMeterPage } from './UsageMeter';
 export const CATALOG_PAGES: Record<string, ComponentType> = {
   AccountMenu: AccountMenuPage,
   ActionBar: ActionBarPage,
+  AmbientBackground: AmbientBackgroundPage,
   AppShell: AppShellPage,
   Avatar: AvatarPage,
+  BarChart: BarChartPage,
   BottomSheet: BottomSheetPage,
   Callout: CalloutPage,
   ChartTheme: ChartThemePage,
@@ -74,6 +79,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   ColorField: ColorFieldPage,
   CommandPalette: CommandPalettePage,
   ConfirmDialog: ConfirmDialogPage,
+  ConfirmDialogWarning: ConfirmDialogWarningPage,
   ContextSelector: ContextSelectorPage,
   CopyField: CopyFieldPage,
   LineChart: LineChartPage,

package/dist/{AbyssCookieConsentProvider-DUYUEZaO.js → AbyssCookieConsentProvider-CeDdkoPq.js}

@@ -1854,6 +1854,11 @@ const fm = {
         "no-value": "Aucune valeur",
         empty: "Aucune donnée à afficher"
       },
+      "bar-chart": {
+        category: "Catégorie",
+        "no-value": "Aucune valeur",
+        empty: "Aucune donnée à afficher"
+      },
       "data-table": {
         "select-all": "Sélectionner toutes les lignes",
         "select-row": "Sélectionner la ligne",
@@ -3649,6 +3654,11 @@ const fm = {
         "no-value": "No value",
         empty: "No data to show"
       },
+      "bar-chart": {
+        category: "Category",
+        "no-value": "No value",
+        empty: "No data to show"
+      },
       "data-table": {
         "select-all": "Select all rows",
         "select-row": "Select row",
@@ -8411,12 +8421,12 @@ export {
   gm as k,
   zm as l,
   Mt as m,
-  rv as n,
-  he as o,
-  oe as p,
-  Ze as q,
+  he as n,
+  oe as o,
+  Ze as p,
+  Nn as q,
   Mm as r,
-  Nn as s,
+  rv as s,
   $s as t,
   dv as u,
   Lt as v,

package/dist/{CookieConsentSettings.component-aVDMZLIs.js → CookieConsentSettings.component-tJE0g-SS.js}

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import { useState as m, useEffect as C } from "react";
 import { Card as v, CardContent as b, Stack as u, Typography as o, FormControlLabel as l, Box as r, Checkbox as d, Button as M } from "@mui/material";
-import { g as R, u as x } from "./AbyssCookieConsentProvider-DUYUEZaO.js";
+import { g as R, u as x } from "./AbyssCookieConsentProvider-CeDdkoPq.js";
 const B = () => {
   const t = R(), { consent: i, save: y } = x(), [h, g] = m((i == null ? void 0 : i.analytics) ?? !1), [k, f] = m((i == null ? void 0 : i.marketing) ?? !1), c = i == null ? void 0 : i.analytics, n = i == null ? void 0 : i.marketing;
   return C(() => {

package/dist/components/data/BarChart/BarChart.d.ts

@@ -0,0 +1,47 @@
+import { ChartSeriesTone } from '../chart-series-tone';
+export declare enum BarChartLayout {
+    /** Bars rise from the category axis at the bottom. */
+    Vertical = "vertical",
+    /** Bars run from the category axis on the left: long category names, many categories. */
+    Horizontal = "horizontal"
+}
+export interface BarChartSeries {
+    id: string;
+    /** Name of the series, in the legend, the tooltip and the table of values. */
+    label: string;
+    /**
+     * The meaning of the series when its color states one (failures, successes): it is then drawn in
+     * the `status.*` color of the tone. Without tone, the series takes the next data series color.
+     */
+    tone?: ChartSeriesTone;
+}
+export interface BarChartCategory {
+    id: string;
+    /** Text of the category axis, the tooltip and the table of values. */
+    label: string;
+    /** Value of each series for this category, keyed by series id; a missing key is no bar. */
+    values: Record<string, number>;
+}
+export interface BarChartProps {
+    series: BarChartSeries[];
+    categories: BarChartCategory[];
+    /** Height of the plot, in px; the width follows the container. */
+    height: number;
+    /** `Vertical` by default. */
+    layout?: BarChartLayout;
+    /** Stacks the series of a category; grouped side by side otherwise. */
+    stacked?: boolean;
+    /** Text of a value: axis ticks, tooltip, table of values. */
+    formatValue(value: number): string;
+    /** Accessible name of the figure and caption of its table. */
+    label: string;
+}
+/**
+ * A bar chart drawn by nivo under `abyssNivoTheme`: one bar per series and category, grouped side by
+ * side or stacked, vertical or horizontal. Each series is colored by its tone (`status.*`) or else
+ * in the order of the data series palette among the series without tone, never by the host. Beyond
+ * one series, a legend names the colors. For screen readers the figure is named by `label` and its
+ * drawing is replaced by a table of every value; a chart without any value says so instead of
+ * drawing empty axes.
+ */
+export declare function BarChart({ series, categories, height, layout, stacked, formatValue, label, }: BarChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/BarChart/BarChart.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/data/DataTable/DataTableDesktop.d.ts

@@ -3,4 +3,4 @@ import { DataTableProps } from './data-table.types';
  * The table form of `DataTable`, from 768 px up. From 768 to 1199 px (next to the icon rail) the
  * `Optional` columns are hidden.
  */
-export declare function DataTableDesktop<T>({ columns: allColumns, rows, getRowId, density, selection, sort, onRowClick, loading, empty, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableDesktop<T>({ columns: allColumns, rows, getRowId, density, selection, sort, onRowClick, loading, empty, label, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/DataTable/DataTableMobile.d.ts

@@ -3,4 +3,4 @@ import { DataTableProps } from './data-table.types';
  * The two-level list form of `DataTable` below 768 px (`.mli`): the selection stays, and the bulk
  * actions move into an `ActionBar` at the bottom of the screen.
  */
-export declare function DataTableMobile<T>({ rows, getRowId, selection, onRowClick, loading, empty, mobileRow, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableMobile<T>({ rows, getRowId, selection, onRowClick, loading, empty, mobileRow, label, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/DataTable/data-table.types.d.ts

@@ -74,4 +74,10 @@ export interface DataTableProps<T> {
     empty: ReactNode;
     /** The two-level item that replaces a row below 768 px. */
     mobileRow: DataTableMobileRow<T>;
+    /**
+     * Accessible name of the table, and of the list that replaces it below 768 px: what the rows are
+     * (« Transferts Beam »). Without it, the table has no name and the list keeps the generic
+     * « Lignes ».
+     */
+    label?: string;
 }

package/dist/components/data/LineChart/LineChart.d.ts

@@ -1,3 +1,4 @@
+import { ChartSeriesTone } from '../chart-series-tone';
 export type LineChartX = Date | number;
 export interface LineChartPoint {
     x: LineChartX;
@@ -8,6 +9,11 @@ export interface LineChartSeries {
     /** Name of the series, in the legend, the tooltip and the table of values. */
     label: string;
     points: LineChartPoint[];
+    /**
+     * The meaning of the series when its color states one (failures, successes): it is then drawn in
+     * the `status.*` color of the tone. Without tone, the series takes the next data series color.
+     */
+    tone?: ChartSeriesTone;
 }
 export interface LineChartProps {
     series: LineChartSeries[];
@@ -15,6 +21,11 @@ export interface LineChartProps {
     height: number;
     /** Fills the area under each line at the `.soft` opacity, from a zero baseline. */
     area?: boolean;
+    /**
+     * Stacks the series as areas from a zero baseline (`area` implied): an x a series has no point at
+     * counts as zero there. The tooltip and the table of values keep each series' own values.
+     */
+    stacked?: boolean;
     /** Text of an x value: axis ticks, tooltip, table of values. */
     formatX(x: LineChartX): string;
     /** Text of a y value: axis ticks, tooltip, table of values. */
@@ -23,10 +34,11 @@ export interface LineChartProps {
     label: string;
 }
 /**
- * A line chart drawn by nivo under `abyssNivoTheme`: one line per series, colored in the order of
- * the data series palette (`data.series.1`, `2`…, the seventh series starting over), never by the
- * host. Dates give a time scale, numbers a linear one. Beyond one series, a legend names the
- * colors. For screen readers the figure is named by `label` and its drawing is replaced by a table
- * of every value; a chart without any point says so instead of drawing empty axes.
+ * A line chart drawn by nivo under `abyssNivoTheme`: one line per series, colored by its tone
+ * (`status.*`) or else in the order of the data series palette among the series without tone
+ * (`data.series.1`, `2`…, the seventh starting over), never by the host. Dates give a time scale,
+ * numbers a linear one; `stacked` piles the series up as areas. Beyond one series, a legend names
+ * the colors. For screen readers the figure is named by `label` and its drawing is replaced by a
+ * table of every value; a chart without any point says so instead of drawing empty axes.
  */
-export declare function LineChart({ series, height, area, formatX, formatY, label, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineChart({ series, height, area, stacked, formatX, formatY, label, }: LineChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/chart-series-tone.d.ts

@@ -0,0 +1,21 @@
+import { SemanticToken } from '../../theme/tokens/semantic';
+/**
+ * The meaning of a chart series whose color states something (ADR-0174, amendment « ton sémantique
+ * des séries »): a series of failures, of successes. A series without a meaning takes no tone and
+ * keeps the data series palette.
+ */
+export declare enum ChartSeriesTone {
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger",
+    Info = "info",
+    Neutral = "neutral"
+}
+/**
+ * Colour token of each series: its tone, else the next data.series token among the series without
+ * tone. The palette counts only the series without tone (the first of them takes `data.series.1`,
+ * whatever toned series stand before it) and starts over after its sixth color.
+ */
+export declare function seriesColorTokens(series: {
+    tone?: ChartSeriesTone;
+}[]): SemanticToken[];

package/dist/components/data/chart-series-tone.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -6,3 +6,5 @@ export * from './chart-theme';
 export * from './UsageMeter/UsageMeter';
 export * from './Pagination/Pagination';
 export * from './LineChart/LineChart';
+export * from './BarChart/BarChart';
+export * from './chart-series-tone';

package/dist/components/inputs/ColorField/ColorField.d.ts

@@ -2,14 +2,17 @@ export interface ColorFieldProps {
     label: string;
     value: string;
     onChange(hex: string): void;
-    /** Colors offered as one-click choices. They belong to the caller's domain, not to the core. */
-    swatches: string[];
+    /**
+     * Colors offered as one-click choices. `CHOICE_SWATCHES` by default, the user choice palette of the
+     * design system; a caller whose domain has its own colors passes them.
+     */
+    swatches?: readonly string[];
 }
 /** `#rrggbb` or `rrggbb` as lowercase `#rrggbb`; `null` when it is not a 6-digit hexadecimal. */
 export declare const normalizeHex: (input: string) => string | null;
 /**
- * A color input: a hexadecimal text field with a preview, plus the caller's swatches. Typing
- * emits `onChange` once the text is a valid `#rrggbb` (the `#` is optional, the case is normalized); any
- * other text shows a message and emits nothing. The swatches are toggle buttons in a labelled group.
+ * A color input: a hexadecimal text field with a preview, plus swatches (the caller's, or the
+ * choice palette `CHOICE_SWATCHES`). Typing emits `onChange` once the text is a valid `#rrggbb`
+ * (the `#` is optional, the case is normalized); any other text shows a message and emits nothing. The swatches are toggle buttons in a labelled group.
  */
 export declare function ColorField({ label, value, onChange, swatches, }: ColorFieldProps): import("react/jsx-runtime").JSX.Element;