@sia-ui/react 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @sia-ui/react
 
+## 0.8.0
+
+### Minor Changes
+
+- Français et anglais livrés, temps réel, calendrier réécrit, suivi d'opérations.
+  - **Deux langues** — `FRENCH` et `ENGLISH` (`@sia-ui/headless`), au format
+    `SiaLocale` : la langue de formatage (`language`), le vocabulaire commun et
+    un groupe typé par composant. Plus aucun texte en dur dans les composants,
+    `aria-label` compris ; dates, nombres et pluriels suivent `language`. Une
+    application qui a sa propre i18n remplit le même format. `formatMessage` et
+    `plural` (`{count}`, clés `_one` / `_other`). `ENGLISH_STATUS_MESSAGES`
+    (`@sia-ui/api`) à côté de `FRENCH_STATUS_MESSAGES`.
+    Seul changement de forme : `EventCalendarLabels.more`, qui était une
+    fonction, devient `more_one` / `more_other` avec `{count}`.
+  - **`SiaProvider` seul fournisseur** — il prend `locale` et `defaults`, et
+    s'imbrique pour une section. `SiaConfigProvider` est obsolète.
+  - **Temps réel** — `createRealtimeBinding`, `socketIoSource`,
+    `eventSourceSource` (`@sia-ui/api`), `useRealtimeStatus`, `LiveIndicator`.
+  - **`EventCalendar` réécrit** — vues mois, semaine, jour, agenda ; variantes ;
+    mode étroit. **`EventManager`** : créer, consulter, modifier, supprimer.
+  - **Nouveaux composants** — `AccountMenu`, `ColorModeToggle`, `LogStream`,
+    `JsonView`, `JobProgress`, `BrandIcon` ; `SunIcon`, `MoonIcon`.
+  - **Formulaires** — `validateAsync` par champ, `submitProps.disabled`
+    respecté ; `controlProps` sur une propriété de ressource.
+  - **Tons lisibles en mode sombre** — `--sia-<ton>-foreground`, calculés pour
+    le contraste ; noms de variables CSS en kebab-case.
+  - **Couches en portail** — menus, calendriers, boîtes et toasts, rendus hors
+    de `[data-sia-root]`, reprennent la police et la couleur de texte du
+    système au lieu de celles du navigateur.
+  - **`Drawer` et `Modal`** — la fermeture est signalée tout de suite ; un
+    double clic à l'ouverture ne referme plus.
+  - **Documentation** — la présentation décrit chaque brique métier (session,
+    greffons d'API, ressources, formulaires, temps réel, langues, utilitaires)
+    avec son scénario et un exemple.
+  - **Props des sous-composants** — chaque composant composé expose celles de
+    ce qu'il utilise (`…Props`) ; `pnpm check:slot-props` le vérifie.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sia-ui/headless@0.8.0
+  - @sia-ui/tokens@0.8.0
+
+## 0.7.1
+
+### Patch Changes
+
+- Aligne les packages publics de SIA UI sur la version 0.7.1 afin que les huit packages restent sur une version commune.
+- Updated dependencies
+  - @sia-ui/tokens@0.7.1
+  - @sia-ui/utils@0.7.1
+
 ## 0.7.0
 
 ### Minor Changes

package/README.md

@@ -12,7 +12,9 @@ pnpm add @sia-ui/react
 import { SiaProvider, Portal, usePortal, useOutsideClick } from "@sia-ui/react";
 ```
 
-- `SiaProvider` — thème clair/sombre, variables CSS;
+- `SiaProvider` — le seul fournisseur : thème clair/sombre, variables CSS,
+  langue (`locale={ENGLISH}`) et valeurs par défaut des composants. Il
+  s'imbrique pour une section, et ne remplace que ce qu'on lui passe;
 - `Portal` et `usePortal` — rendre hors du flux, sans casser le rendu serveur;
 - `useOutsideClick` — écoute `pointerdown`, pas `click` : une sélection de
   texte qui déborde ne ferme pas l'overlay;
@@ -51,6 +53,58 @@ Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible
 <!-- sia:changelog:start -->
 # @sia-ui/react
 
+## 0.8.0
+
+### Minor Changes
+
+- Français et anglais livrés, temps réel, calendrier réécrit, suivi d'opérations.
+  - **Deux langues** — `FRENCH` et `ENGLISH` (`@sia-ui/headless`), au format
+    `SiaLocale` : la langue de formatage (`language`), le vocabulaire commun et
+    un groupe typé par composant. Plus aucun texte en dur dans les composants,
+    `aria-label` compris ; dates, nombres et pluriels suivent `language`. Une
+    application qui a sa propre i18n remplit le même format. `formatMessage` et
+    `plural` (`{count}`, clés `_one` / `_other`). `ENGLISH_STATUS_MESSAGES`
+    (`@sia-ui/api`) à côté de `FRENCH_STATUS_MESSAGES`.
+    Seul changement de forme : `EventCalendarLabels.more`, qui était une
+    fonction, devient `more_one` / `more_other` avec `{count}`.
+  - **`SiaProvider` seul fournisseur** — il prend `locale` et `defaults`, et
+    s'imbrique pour une section. `SiaConfigProvider` est obsolète.
+  - **Temps réel** — `createRealtimeBinding`, `socketIoSource`,
+    `eventSourceSource` (`@sia-ui/api`), `useRealtimeStatus`, `LiveIndicator`.
+  - **`EventCalendar` réécrit** — vues mois, semaine, jour, agenda ; variantes ;
+    mode étroit. **`EventManager`** : créer, consulter, modifier, supprimer.
+  - **Nouveaux composants** — `AccountMenu`, `ColorModeToggle`, `LogStream`,
+    `JsonView`, `JobProgress`, `BrandIcon` ; `SunIcon`, `MoonIcon`.
+  - **Formulaires** — `validateAsync` par champ, `submitProps.disabled`
+    respecté ; `controlProps` sur une propriété de ressource.
+  - **Tons lisibles en mode sombre** — `--sia-<ton>-foreground`, calculés pour
+    le contraste ; noms de variables CSS en kebab-case.
+  - **Couches en portail** — menus, calendriers, boîtes et toasts, rendus hors
+    de `[data-sia-root]`, reprennent la police et la couleur de texte du
+    système au lieu de celles du navigateur.
+  - **`Drawer` et `Modal`** — la fermeture est signalée tout de suite ; un
+    double clic à l'ouverture ne referme plus.
+  - **Documentation** — la présentation décrit chaque brique métier (session,
+    greffons d'API, ressources, formulaires, temps réel, langues, utilitaires)
+    avec son scénario et un exemple.
+  - **Props des sous-composants** — chaque composant composé expose celles de
+    ce qu'il utilise (`…Props`) ; `pnpm check:slot-props` le vérifie.
+
+### Patch Changes
+
+- Updated dependencies
+  - @sia-ui/headless@0.8.0
+  - @sia-ui/tokens@0.8.0
+
+## 0.7.1
+
+### Patch Changes
+
+- Aligne les packages publics de SIA UI sur la version 0.7.1 afin que les huit packages restent sur une version commune.
+- Updated dependencies
+  - @sia-ui/tokens@0.7.1
+  - @sia-ui/utils@0.7.1
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var react = require('react');
 var tokens = require('@sia-ui/tokens');
+var headless = require('@sia-ui/headless');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var clipboard = require('@sia-ui/utils/clipboard');
@@ -119,13 +120,74 @@ var ThemeContext = react.createContext({
   toggleColorMode: () => {
   }
 });
-function SiaProvider({
+var DejaFourni = react.createContext(false);
+function SiaProvider(props) {
+  const imbrique = react.useContext(DejaFourni);
+  if (imbrique) return /* @__PURE__ */ jsxRuntime.jsx(SectionSia, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DejaFourni.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(RacineSia, { ...props }) });
+}
+function Reglages({
+  locale,
+  defaults,
+  children
+}) {
+  if (!locale && !defaults) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    headless.SiaConfigProvider,
+    {
+      ...locale ? { locale } : {},
+      ...defaults ? { defaults } : {},
+      children
+    }
+  );
+}
+function SectionSia({
+  children,
+  colorMode,
+  theme,
+  locale,
+  defaults,
+  className
+}) {
+  const parent = react.useContext(ThemeContext);
+  const force = colorMode === "light" || colorMode === "dark" ? colorMode : void 0;
+  const resolved = force ?? parent.resolvedColorMode;
+  const habille = force !== void 0 || theme !== void 0 || className !== void 0;
+  const variables = react.useMemo(() => {
+    if (!habille) return void 0;
+    return {
+      // Le mode seul ne change que le sémantique ; les primitives sont déjà
+      // posées par la racine.
+      ...force ? tokens.toCssVariables(force === "dark" ? tokens.darkTheme : tokens.lightTheme) : {},
+      ...tokens.toCssVariables(theme ?? {})
+    };
+  }, [habille, force, theme]);
+  const valeur = react.useMemo(
+    () => force ? { ...parent, resolvedColorMode: force } : parent,
+    [force, parent]
+  );
+  const contenu = /* @__PURE__ */ jsxRuntime.jsx(Reglages, { locale, defaults, children });
+  if (!habille) return contenu;
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: valeur, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className,
+      "data-sia-color-mode": resolved,
+      style: { ...variables, colorScheme: resolved },
+      ...locale?.language ? { lang: locale.language } : {},
+      children: contenu
+    }
+  ) });
+}
+function RacineSia({
   children,
   colorMode: controlled,
   defaultColorMode = "system",
   onColorModeChange,
   storageKey = COLOR_MODE_KEY,
   theme,
+  locale,
+  defaults,
   className
 }) {
   const [stored, setStored] = useLocalStorage(
@@ -174,7 +236,8 @@ function SiaProvider({
       "data-sia-root": "",
       "data-sia-color-mode": resolved,
       style: variables,
-      children
+      ...locale?.language ? { lang: locale.language } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsx(Reglages, { locale, defaults, children })
     }
   ) });
 }

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { PropsWithChildren, Ref, RefCallback, RefObject } from 'react';
 import { SiaTheme } from '@sia-ui/tokens';
+import { SiaLocaleInput, SiaComponentDefaults } from '@sia-ui/headless';
 
 /** Ce que l'application demande. */
 type ColorMode = "light" | "dark" | "system";
@@ -17,6 +18,14 @@ interface SiaProviderProps extends PropsWithChildren {
     /** Clé de persistance, ou `false` pour ne rien enregistrer. */
     storageKey?: string | false;
     theme?: SiaTheme;
+    /**
+     * Les textes des composants et la langue des dates et nombres : `FRENCH`
+     * (par défaut), `ENGLISH`, ou une locale remplie par l'application —
+     * depuis i18next ou ailleurs. Voir `SiaLocale`.
+     */
+    locale?: SiaLocaleInput;
+    /** Les props par défaut, par composant. Voir `SiaConfigProvider`. */
+    defaults?: SiaComponentDefaults;
     className?: string;
 }
 interface ThemeValue {
@@ -29,14 +38,23 @@ interface ThemeValue {
     toggleColorMode: () => void;
 }
 /**
- * Le thème de l'application.
+ * Le fournisseur de SIA UI : thème, mode clair / sombre, textes des
+ * composants et réglages par défaut. Le seul à poser.
+ *
+ * À la racine, il applique le thème et gère le mode. Imbriqué, il ne
+ * remplace que ce qu'on lui passe, pour la section qu'il entoure : une autre
+ * locale, un autre réglage par défaut, un thème ou un mode forcé.
  *
- * `next-themes` apparaît dans cinq des projets du disque D, pour cette seule
- * fonction. Il tient ici en un fournisseur, sans dépendance et sans être lié
- * à un cadre : `system` suit la préférence du poste, le choix est enregistré,
- * et `colorMode` reste disponible pour piloter le mode depuis l'extérieur.
+ * ```tsx
+ * <SiaProvider locale={ENGLISH}>
+ *   <App />
+ *   <SiaProvider defaults={{ button: { size: "sm" } }}>
+ *     <Barre />
+ *   </SiaProvider>
+ * </SiaProvider>
+ * ```
  */
-declare function SiaProvider({ children, colorMode: controlled, defaultColorMode, onColorModeChange, storageKey, theme, className, }: SiaProviderProps): react_jsx_runtime.JSX.Element;
+declare function SiaProvider(props: SiaProviderProps): react_jsx_runtime.JSX.Element;
 /** Le thème en vigueur, et de quoi en changer. */
 declare function useSiaTheme(): ThemeValue;
 /**

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { PropsWithChildren, Ref, RefCallback, RefObject } from 'react';
 import { SiaTheme } from '@sia-ui/tokens';
+import { SiaLocaleInput, SiaComponentDefaults } from '@sia-ui/headless';
 
 /** Ce que l'application demande. */
 type ColorMode = "light" | "dark" | "system";
@@ -17,6 +18,14 @@ interface SiaProviderProps extends PropsWithChildren {
     /** Clé de persistance, ou `false` pour ne rien enregistrer. */
     storageKey?: string | false;
     theme?: SiaTheme;
+    /**
+     * Les textes des composants et la langue des dates et nombres : `FRENCH`
+     * (par défaut), `ENGLISH`, ou une locale remplie par l'application —
+     * depuis i18next ou ailleurs. Voir `SiaLocale`.
+     */
+    locale?: SiaLocaleInput;
+    /** Les props par défaut, par composant. Voir `SiaConfigProvider`. */
+    defaults?: SiaComponentDefaults;
     className?: string;
 }
 interface ThemeValue {
@@ -29,14 +38,23 @@ interface ThemeValue {
     toggleColorMode: () => void;
 }
 /**
- * Le thème de l'application.
+ * Le fournisseur de SIA UI : thème, mode clair / sombre, textes des
+ * composants et réglages par défaut. Le seul à poser.
+ *
+ * À la racine, il applique le thème et gère le mode. Imbriqué, il ne
+ * remplace que ce qu'on lui passe, pour la section qu'il entoure : une autre
+ * locale, un autre réglage par défaut, un thème ou un mode forcé.
  *
- * `next-themes` apparaît dans cinq des projets du disque D, pour cette seule
- * fonction. Il tient ici en un fournisseur, sans dépendance et sans être lié
- * à un cadre : `system` suit la préférence du poste, le choix est enregistré,
- * et `colorMode` reste disponible pour piloter le mode depuis l'extérieur.
+ * ```tsx
+ * <SiaProvider locale={ENGLISH}>
+ *   <App />
+ *   <SiaProvider defaults={{ button: { size: "sm" } }}>
+ *     <Barre />
+ *   </SiaProvider>
+ * </SiaProvider>
+ * ```
  */
-declare function SiaProvider({ children, colorMode: controlled, defaultColorMode, onColorModeChange, storageKey, theme, className, }: SiaProviderProps): react_jsx_runtime.JSX.Element;
+declare function SiaProvider(props: SiaProviderProps): react_jsx_runtime.JSX.Element;
 /** Le thème en vigueur, et de quoi en changer. */
 declare function useSiaTheme(): ThemeValue;
 /**

package/dist/index.js

@@ -1,6 +1,7 @@
-import { createContext, useState, useRef, useEffect, useCallback, useSyncExternalStore, useMemo, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useSyncExternalStore, useContext, useMemo } from 'react';
 import { toCssVariables, darkTheme, lightTheme, primitives } from '@sia-ui/tokens';
-import { jsx } from 'react/jsx-runtime';
+import { SiaConfigProvider } from '@sia-ui/headless';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { copyText } from '@sia-ui/utils/clipboard';
 
@@ -117,13 +118,74 @@ var ThemeContext = createContext({
   toggleColorMode: () => {
   }
 });
-function SiaProvider({
+var DejaFourni = createContext(false);
+function SiaProvider(props) {
+  const imbrique = useContext(DejaFourni);
+  if (imbrique) return /* @__PURE__ */ jsx(SectionSia, { ...props });
+  return /* @__PURE__ */ jsx(DejaFourni.Provider, { value: true, children: /* @__PURE__ */ jsx(RacineSia, { ...props }) });
+}
+function Reglages({
+  locale,
+  defaults,
+  children
+}) {
+  if (!locale && !defaults) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(
+    SiaConfigProvider,
+    {
+      ...locale ? { locale } : {},
+      ...defaults ? { defaults } : {},
+      children
+    }
+  );
+}
+function SectionSia({
+  children,
+  colorMode,
+  theme,
+  locale,
+  defaults,
+  className
+}) {
+  const parent = useContext(ThemeContext);
+  const force = colorMode === "light" || colorMode === "dark" ? colorMode : void 0;
+  const resolved = force ?? parent.resolvedColorMode;
+  const habille = force !== void 0 || theme !== void 0 || className !== void 0;
+  const variables = useMemo(() => {
+    if (!habille) return void 0;
+    return {
+      // Le mode seul ne change que le sémantique ; les primitives sont déjà
+      // posées par la racine.
+      ...force ? toCssVariables(force === "dark" ? darkTheme : lightTheme) : {},
+      ...toCssVariables(theme ?? {})
+    };
+  }, [habille, force, theme]);
+  const valeur = useMemo(
+    () => force ? { ...parent, resolvedColorMode: force } : parent,
+    [force, parent]
+  );
+  const contenu = /* @__PURE__ */ jsx(Reglages, { locale, defaults, children });
+  if (!habille) return contenu;
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: valeur, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "data-sia-color-mode": resolved,
+      style: { ...variables, colorScheme: resolved },
+      ...locale?.language ? { lang: locale.language } : {},
+      children: contenu
+    }
+  ) });
+}
+function RacineSia({
   children,
   colorMode: controlled,
   defaultColorMode = "system",
   onColorModeChange,
   storageKey = COLOR_MODE_KEY,
   theme,
+  locale,
+  defaults,
   className
 }) {
   const [stored, setStored] = useLocalStorage(
@@ -172,7 +234,8 @@ function SiaProvider({
       "data-sia-root": "",
       "data-sia-color-mode": resolved,
       style: variables,
-      children
+      ...locale?.language ? { lang: locale.language } : {},
+      children: /* @__PURE__ */ jsx(Reglages, { locale, defaults, children })
     }
   ) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia-ui/react",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React runtime foundations for SIA UI.",
   "keywords": [
     "sia-ui",
@@ -44,8 +44,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sia-ui/tokens": "0.7.0",
-    "@sia-ui/utils": "0.7.0"
+    "@sia-ui/headless": "0.8.0",
+    "@sia-ui/tokens": "0.8.0",
+    "@sia-ui/utils": "0.8.0"
   },
   "peerDependencies": {
     "react": ">=18.2.0",