@focus4/styling 12.11.0 → 12.11.1

package/lib/focus4.styling.css

@@ -0,0 +1,365 @@
+html {
+  color: rgb(var(--color-black));
+  font-size: var(--font-size-small);
+  line-height: 1.4;
+  font-family: var(--preferred-font);
+}
+
+body {
+  animation-duration: var(--animation-duration);
+  animation-delay: var(--animation-delay);
+  animation-timing-function: var(--animation-curve-default);
+  margin: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 24px 0;
+  font-weight: 400;
+}
+
+h1 {
+  font-size: calc(3.5 * var(--font-size));
+  letter-spacing: -.02em;
+  line-height: 1.35;
+}
+
+h2 {
+  font-size: calc(2.8 * var(--font-size));
+  line-height: 48px;
+}
+
+h3 {
+  font-size: calc(2.2 * var(--font-size));
+  line-height: 40px;
+}
+
+h4 {
+  font-size: calc(1.5 * var(--font-size));
+  line-height: 32px;
+}
+
+h5 {
+  font-size: calc(1.25 * var(--font-size));
+  font-weight: var(--font-weight-semi-bold);
+  letter-spacing: .02em;
+  line-height: 1;
+}
+
+h6 {
+  font-size: var(--font-size);
+  letter-spacing: .04em;
+  line-height: 24px;
+}
+
+th {
+  font-weight: normal;
+}
+:root {
+  --color-black: 0, 0, 0;
+  --color-white: 255, 255, 255;
+  --palette-red-50: 255, 235, 238;
+  --palette-red-100: 255, 205, 210;
+  --palette-red-200: 239, 154, 154;
+  --palette-red-300: 229, 115, 115;
+  --palette-red-400: 239, 83, 80;
+  --palette-red-500: 244, 67, 54;
+  --palette-red-600: 229, 57, 53;
+  --palette-red-700: 211, 47, 47;
+  --palette-red-800: 198, 40, 40;
+  --palette-red-900: 183, 28, 28;
+  --palette-red-a100: 255, 138, 128;
+  --palette-red-a200: 255, 82, 82;
+  --palette-red-a400: 255, 23, 68;
+  --palette-red-a700: 213, 0, 0;
+  --palette-pink-50: 252, 228, 236;
+  --palette-pink-100: 248, 187, 208;
+  --palette-pink-200: 244, 143, 177;
+  --palette-pink-300: 240, 98, 146;
+  --palette-pink-400: 236, 64, 122;
+  --palette-pink-500: 233, 30, 99;
+  --palette-pink-600: 216, 27, 96;
+  --palette-pink-700: 194, 24, 91;
+  --palette-pink-800: 173, 20, 87;
+  --palette-pink-900: 136, 14, 79;
+  --palette-pink-a100: 255, 128, 171;
+  --palette-pink-a200: 255, 64, 129;
+  --palette-pink-a400: 245, 0, 87;
+  --palette-pink-a700: 197, 17, 98;
+  --palette-purple-50: 243, 229, 245;
+  --palette-purple-100: 225, 190, 231;
+  --palette-purple-200: 206, 147, 216;
+  --palette-purple-300: 186, 104, 200;
+  --palette-purple-400: 171, 71, 188;
+  --palette-purple-500: 156, 39, 176;
+  --palette-purple-600: 142, 36, 170;
+  --palette-purple-700: 123, 31, 162;
+  --palette-purple-800: 106, 27, 154;
+  --palette-purple-900: 74, 20, 140;
+  --palette-purple-a100: 234, 128, 252;
+  --palette-purple-a200: 224, 64, 251;
+  --palette-purple-a400: 213, 0, 249;
+  --palette-purple-a700: 170, 0, 255;
+  --palette-deep-purple-50: 237, 231, 246;
+  --palette-deep-purple-100: 209, 196, 233;
+  --palette-deep-purple-200: 179, 157, 219;
+  --palette-deep-purple-300: 149, 117, 205;
+  --palette-deep-purple-400: 126, 87, 194;
+  --palette-deep-purple-500: 103, 58, 183;
+  --palette-deep-purple-600: 94, 53, 177;
+  --palette-deep-purple-700: 81, 45, 168;
+  --palette-deep-purple-800: 69, 39, 160;
+  --palette-deep-purple-900: 49, 27, 146;
+  --palette-deep-purple-a100: 179, 136, 255;
+  --palette-deep-purple-a200: 124, 77, 255;
+  --palette-deep-purple-a400: 101, 31, 255;
+  --palette-deep-purple-a700: 98, 0, 234;
+  --palette-indigo-50: 232, 234, 246;
+  --palette-indigo-100: 197, 202, 233;
+  --palette-indigo-200: 159, 168, 218;
+  --palette-indigo-300: 121, 134, 203;
+  --palette-indigo-400: 92, 107, 192;
+  --palette-indigo-500: 63, 81, 181;
+  --palette-indigo-600: 57, 73, 171;
+  --palette-indigo-700: 48, 63, 159;
+  --palette-indigo-800: 40, 53, 147;
+  --palette-indigo-900: 26, 35, 126;
+  --palette-indigo-a100: 140, 158, 255;
+  --palette-indigo-a200: 83, 109, 254;
+  --palette-indigo-a400: 61, 90, 254;
+  --palette-indigo-a700: 48, 79, 254;
+  --palette-blue-50: 227, 242, 253;
+  --palette-blue-100: 187, 222, 251;
+  --palette-blue-200: 144, 202, 249;
+  --palette-blue-300: 100, 181, 246;
+  --palette-blue-400: 66, 165, 245;
+  --palette-blue-500: 33, 150, 243;
+  --palette-blue-600: 30, 136, 229;
+  --palette-blue-700: 25, 118, 210;
+  --palette-blue-800: 21, 101, 192;
+  --palette-blue-900: 13, 71, 161;
+  --palette-blue-a100: 130, 177, 255;
+  --palette-blue-a200: 68, 138, 255;
+  --palette-blue-a400: 41, 121, 255;
+  --palette-blue-a700: 41, 98, 255;
+  --palette-light-blue-50: 225, 245, 254;
+  --palette-light-blue-100: 179, 229, 252;
+  --palette-light-blue-200: 129, 212, 250;
+  --palette-light-blue-300: 79, 195, 247;
+  --palette-light-blue-400: 41, 182, 246;
+  --palette-light-blue-500: 3, 169, 244;
+  --palette-light-blue-600: 3, 155, 229;
+  --palette-light-blue-700: 2, 136, 209;
+  --palette-light-blue-800: 2, 119, 189;
+  --palette-light-blue-900: 1, 87, 155;
+  --palette-light-blue-a100: 128, 216, 255;
+  --palette-light-blue-a200: 64, 196, 255;
+  --palette-light-blue-a400: 0, 176, 255;
+  --palette-light-blue-a700: 0, 145, 234;
+  --palette-cyan-50: 224, 247, 250;
+  --palette-cyan-100: 178, 235, 242;
+  --palette-cyan-200: 128, 222, 234;
+  --palette-cyan-300: 77, 208, 225;
+  --palette-cyan-400: 38, 198, 218;
+  --palette-cyan-500: 0, 188, 212;
+  --palette-cyan-600: 0, 172, 193;
+  --palette-cyan-700: 0, 151, 167;
+  --palette-cyan-800: 0, 131, 143;
+  --palette-cyan-900: 0, 96, 100;
+  --palette-cyan-a100: 132, 255, 255;
+  --palette-cyan-a200: 24, 255, 255;
+  --palette-cyan-a400: 0, 229, 255;
+  --palette-cyan-a700: 0, 184, 212;
+  --palette-teal-50: 224, 242, 241;
+  --palette-teal-100: 178, 223, 219;
+  --palette-teal-200: 128, 203, 196;
+  --palette-teal-300: 77, 182, 172;
+  --palette-teal-400: 38, 166, 154;
+  --palette-teal-500: 0, 150, 136;
+  --palette-teal-600: 0, 137, 123;
+  --palette-teal-700: 0, 121, 107;
+  --palette-teal-800: 0, 105, 92;
+  --palette-teal-900: 0, 77, 64;
+  --palette-teal-a100: 167, 255, 235;
+  --palette-teal-a200: 100, 255, 218;
+  --palette-teal-a400: 29, 233, 182;
+  --palette-teal-a700: 0, 191, 165;
+  --palette-green-50: 232, 245, 233;
+  --palette-green-100: 200, 230, 201;
+  --palette-green-200: 165, 214, 167;
+  --palette-green-300: 129, 199, 132;
+  --palette-green-400: 102, 187, 106;
+  --palette-green-500: 76, 175, 80;
+  --palette-green-600: 67, 160, 71;
+  --palette-green-700: 56, 142, 60;
+  --palette-green-800: 46, 125, 50;
+  --palette-green-900: 27, 94, 32;
+  --palette-green-a100: 185, 246, 202;
+  --palette-green-a200: 105, 240, 174;
+  --palette-green-a400: 0, 230, 118;
+  --palette-green-a700: 0, 200, 83;
+  --palette-light-green-50: 241, 248, 233;
+  --palette-light-green-100: 220, 237, 200;
+  --palette-light-green-200: 197, 225, 165;
+  --palette-light-green-300: 174, 213, 129;
+  --palette-light-green-400: 156, 204, 101;
+  --palette-light-green-500: 139, 195, 74;
+  --palette-light-green-600: 124, 179, 66;
+  --palette-light-green-700: 104, 159, 56;
+  --palette-light-green-800: 85, 139, 47;
+  --palette-light-green-900: 51, 105, 30;
+  --palette-light-green-a100: 204, 255, 144;
+  --palette-light-green-a200: 178, 255, 89;
+  --palette-light-green-a400: 118, 255, 3;
+  --palette-light-green-a700: 100, 221, 23;
+  --palette-lime-50: 249, 251, 231;
+  --palette-lime-100: 240, 244, 195;
+  --palette-lime-200: 230, 238, 156;
+  --palette-lime-300: 220, 231, 117;
+  --palette-lime-400: 212, 225, 87;
+  --palette-lime-500: 205, 220, 57;
+  --palette-lime-600: 192, 202, 51;
+  --palette-lime-700: 175, 180, 43;
+  --palette-lime-800: 158, 157, 36;
+  --palette-lime-900: 130, 119, 23;
+  --palette-lime-a100: 244, 255, 129;
+  --palette-lime-a200: 238, 255, 65;
+  --palette-lime-a400: 198, 255, 0;
+  --palette-lime-a700: 174, 234, 0;
+  --palette-yellow-50: 255, 253, 231;
+  --palette-yellow-100: 255, 249, 196;
+  --palette-yellow-200: 255, 245, 157;
+  --palette-yellow-300: 255, 241, 118;
+  --palette-yellow-400: 255, 238, 88;
+  --palette-yellow-500: 255, 235, 59;
+  --palette-yellow-600: 253, 216, 53;
+  --palette-yellow-700: 251, 192, 45;
+  --palette-yellow-800: 249, 168, 37;
+  --palette-yellow-900: 245, 127, 23;
+  --palette-yellow-a100: 255, 255, 141;
+  --palette-yellow-a200: 255, 255, 0;
+  --palette-yellow-a400: 255, 234, 0;
+  --palette-yellow-a700: 255, 214, 0;
+  --palette-amber-50: 255, 248, 225;
+  --palette-amber-100: 255, 236, 179;
+  --palette-amber-200: 255, 224, 130;
+  --palette-amber-300: 255, 213, 79;
+  --palette-amber-400: 255, 202, 40;
+  --palette-amber-500: 255, 193, 7;
+  --palette-amber-600: 255, 179, 0;
+  --palette-amber-700: 255, 160, 0;
+  --palette-amber-800: 255, 143, 0;
+  --palette-amber-900: 255, 111, 0;
+  --palette-amber-a100: 255, 229, 127;
+  --palette-amber-a200: 255, 215, 64;
+  --palette-amber-a400: 255, 196, 0;
+  --palette-amber-a700: 255, 171, 0;
+  --palette-orange-50: 255, 243, 224;
+  --palette-orange-100: 255, 224, 178;
+  --palette-orange-200: 255, 204, 128;
+  --palette-orange-300: 255, 183, 77;
+  --palette-orange-400: 255, 167, 38;
+  --palette-orange-500: 255, 152, 0;
+  --palette-orange-600: 251, 140, 0;
+  --palette-orange-700: 245, 124, 0;
+  --palette-orange-800: 239, 108, 0;
+  --palette-orange-900: 230, 81, 0;
+  --palette-orange-a100: 255, 209, 128;
+  --palette-orange-a200: 255, 171, 64;
+  --palette-orange-a400: 255, 145, 0;
+  --palette-orange-a700: 255, 109, 0;
+  --palette-deep-orange-50: 251, 233, 231;
+  --palette-deep-orange-100: 255, 204, 188;
+  --palette-deep-orange-200: 255, 171, 145;
+  --palette-deep-orange-300: 255, 138, 101;
+  --palette-deep-orange-400: 255, 112, 67;
+  --palette-deep-orange-500: 255, 87, 34;
+  --palette-deep-orange-600: 244, 81, 30;
+  --palette-deep-orange-700: 230, 74, 25;
+  --palette-deep-orange-800: 216, 67, 21;
+  --palette-deep-orange-900: 191, 54, 12;
+  --palette-deep-orange-a100: 255, 158, 128;
+  --palette-deep-orange-a200: 255, 110, 64;
+  --palette-deep-orange-a400: 255, 61, 0;
+  --palette-deep-orange-a700: 221, 44, 0;
+  --palette-brown-50: 239, 235, 233;
+  --palette-brown-100: 215, 204, 200;
+  --palette-brown-200: 188, 170, 164;
+  --palette-brown-300: 161, 136, 127;
+  --palette-brown-400: 141, 110, 99;
+  --palette-brown-500: 121, 85, 72;
+  --palette-brown-600: 109, 76, 65;
+  --palette-brown-700: 93, 64, 55;
+  --palette-brown-800: 78, 52, 46;
+  --palette-brown-900: 62, 39, 35;
+  --palette-grey-50: 250, 250, 250;
+  --palette-grey-100: 245, 245, 245;
+  --palette-grey-200: 238, 238, 238;
+  --palette-grey-300: 224, 224, 224;
+  --palette-grey-400: 189, 189, 189;
+  --palette-grey-500: 158, 158, 158;
+  --palette-grey-600: 117, 117, 117;
+  --palette-grey-700: 97, 97, 97;
+  --palette-grey-800: 66, 66, 66;
+  --palette-grey-900: 33, 33, 33;
+  --palette-blue-grey-50: 236, 239, 241;
+  --palette-blue-grey-100: 207, 216, 220;
+  --palette-blue-grey-200: 176, 190, 197;
+  --palette-blue-grey-300: 144, 164, 174;
+  --palette-blue-grey-400: 120, 144, 156;
+  --palette-blue-grey-500: 96, 125, 139;
+  --palette-blue-grey-600: 84, 110, 122;
+  --palette-blue-grey-700: 69, 90, 100;
+  --palette-blue-grey-800: 55, 71, 79;
+  --palette-blue-grey-900: 38, 50, 56;
+}
+
+:root[dark] {
+  --color-black: 238, 238, 238;
+  --color-white: 11, 11, 11;
+  --palette-grey-50: 22, 22, 22;
+  --palette-grey-100: 33, 33, 33;
+  --palette-grey-200: 44, 44, 44;
+  --palette-grey-300: 66, 66, 66;
+  --palette-grey-400: 97, 97, 97;
+  --palette-grey-500: 117, 117, 117;
+  --palette-grey-600: 158, 158, 158;
+  --palette-grey-700: 189, 189, 189;
+  --palette-grey-800: 224, 224, 224;
+  --palette-grey-900: 238, 238, 238;
+}
+:root {
+  --color-primary: var(--palette-indigo-500);
+  --color-primary-light: var(--palette-indigo-100);
+  --color-accent: var(--palette-pink-a200);
+  --color-divider: var(--palette-grey-300);
+  --preferred-font: "Roboto", "Helvetica", "Arial", sans-serif;
+  --font-size: 16px;
+  --font-size-small: 14px;
+  --font-size-big: 18px;
+  --font-weight-semi-bold: 500;
+  --font-weight-bold: 700;
+  --shadow-2p: 0 2px 2px 0 #00000024, 0 3px 1px -2px #0003, 0 1px 5px 0 #0000001f;
+  --shadow-4p: 0 4px 5px 0 #00000024, 0 1px 10px 0 #0000001f, 0 2px 4px -1px #0003;
+  --animation-duration: .35s;
+  --animation-duration-short: .2s;
+  --animation-delay: calc(var(--animation-duration) / 5);
+  --animation-curve-fast-out-slow-in: cubic-bezier(.4, 0, .2, 1);
+  --animation-curve-fast-out-linear-in: cubic-bezier(.4, 0, 1, 1);
+  --animation-curve-focus-ring: cubic-bezier(.2, 0, 0, 1);
+  --animation-curve-default: var(--animation-curve-fast-out-slow-in);
+  --z-index-highest: 300;
+  --z-index-higher: 200;
+  --z-index-high: 100;
+  --z-index-normal: 1;
+}
+
+:root[dark] {
+  color-scheme: dark;
+  --color-primary: var(--palette-indigo-300);
+  --color-primary-light: var(--palette-indigo-900);
+  --color-accent: var(--palette-pink-a100);
+}

package/lib/focus4.styling.d.ts

@@ -0,0 +1,171 @@
+import * as _$react from "react";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/animation.d.ts
+/** Récupère les paramètres de transition par défaut, à partir des variables CSS correspondantes. */
+declare function getDefaultTransition(): {
+  readonly delay: number;
+  readonly duration: number;
+  readonly ease: [number, number, number, number] | undefined;
+};
+/** Récupère les paramètres de transition "spring" par défaut. */
+declare function getSpringTransition(): {
+  readonly type: "spring";
+  readonly bounce: 0;
+  readonly duration: number;
+};
+//#endregion
+//#region src/config.d.ts
+/** Config Focus de l'application */
+declare const uiConfig: {
+  /** Valeur de "autocomplete" sur les inputs pour lesquels on ne veut pas d'autocomplétion. */autocompleteOffValue: string; /** Classe CSS par défaut des icônes. */
+  defaultIconClassName: string;
+};
+//#endregion
+//#region src/theme/common.d.ts
+type CSSElement<T> = T & string & {
+  _element: void;
+};
+type CSSMod<N extends string, T> = N & T & string & {
+  _mod: void;
+};
+type CSSToStrings<T> = { [P in keyof T]?: string };
+type Mods<CSS, E> = { [P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never }[keyof CSS];
+type ModNames<CSS, E> = { [P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never }[keyof CSS];
+type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => { [_ in ModNames<CSS, E> | P]: string }) & (Mods<CSS, E> extends never | undefined ? () => string : (mods?: { [_ in Mods<CSS, E>]?: boolean }) => string);
+interface CSSContext {
+  [key: string]: object;
+}
+declare const ThemeContext: _$react.Context<CSSContext>;
+//#endregion
+//#region src/theme/themeable.d.ts
+/** Merges passed themes by concatenating string keys */
+declare function themeable<T extends object>(...themes: T[]): T;
+//#endregion
+//#region src/theme/theme-provider.d.ts
+/** Contient l'ensemble des classes CSS surchargeables (elles le sont toutes), regroupées par composant. */
+interface FocusCSSContext extends CSSContext {
+  actionBar: object;
+  advancedSearch: object;
+  contextualActions: object;
+  facet: object;
+  facetBox: object;
+  group: object;
+  list: object;
+  listBase: object;
+  searchBar: object;
+  summary: object;
+  table: object;
+  timeline: object;
+  booleanRadio: object;
+  display: object;
+  field: object;
+  form: object;
+  inputDate: object;
+  inputFile: object;
+  label: object;
+  select: object;
+  selectCheckbox: object;
+  selectChips: object;
+  selectRadio: object;
+  dialog: object;
+  filAriane: object;
+  header: object;
+  lateralMenu: object;
+  layout: object;
+  mainMenu: object;
+  overlay: object;
+  panel: object;
+  popin: object;
+  scrollable: object;
+  scrollspy: object;
+  autocomplete: object;
+  button: object;
+  calendar: object;
+  checkbox: object;
+  chip: object;
+  dropdown: object;
+  floatingActionButton: object;
+  iconButton: object;
+  menu: object;
+  progressIndicator: object;
+  radio: object;
+  ripple: object;
+  slider: object;
+  snackbar: object;
+  supportingText: object;
+  switch: object;
+  textField: object;
+  tabs: object;
+  tooltip: object;
+}
+/** Props du ThemeProvider. */
+interface ThemeProviderProps {
+  /** Objet faisant correspondre à un identifiant de composant son objet de classes CSS associé.  */
+  appTheme: Partial<FocusCSSContext>;
+  /** Enfants. */
+  children: ReactNode;
+}
+/**
+ * Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés
+ * à l'intérieur (via un context React).
+ *
+ * Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent,
+ * y compris sur les mêmes composants.
+ */
+declare function ThemeProvider({
+  appTheme,
+  children
+}: ThemeProviderProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/theme/to-bem.d.ts
+type AllMods<CSS> = { [P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never }[keyof CSS];
+type ToBem<CSS> = Omit<{ [P in keyof CSS]-?: CSS[P] extends CSSElement<infer E> ? BemFunction<CSS, P, E> : CSS[P] extends CSSMod<infer __, infer ___> ? never : BemFunction<CSS, P, string> }, AllMods<CSS>>;
+type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;
+/**
+ * `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM
+ * en un objet contenant une fonction par "élément" à laquelle on peut appliquer ses "modificateurs".
+ *
+ * Par exemple, un objet contenant les classes
+ * ```ts
+ * ["panel", "panel--editing", "panel--loading", "title", "title--top", "title--bottom"]
+ * ```
+ * sera transformé en un objet avec 2 fonctions `panel` et `title` :
+ * ```ts
+ * {
+ *     panel({editing?: boolean; loading?: boolean}) => string;
+ *     title({top?: boolean; bottom?: boolean}) => string;
+ * }
+ * ```
+ * Un appel à une fonction retournera la classe CSS de l'"élément", à laquelle seront ajoutées ou non les classes des différents "modificateurs",
+ * selon les valeurs des différents booléens.
+ *
+ * Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres.
+ * Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange.
+ *
+ * _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._
+ *
+ * _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._
+ */
+declare function toBem<CSS>(css: CSS): ToBem<CSS>;
+/**
+ * `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet
+ * qui contient toutes les classes CSS qui le compose.
+ */
+declare function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T>;
+//#endregion
+//#region src/theme/use-theme.d.ts
+/**
+ * `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS
+ * passées en paramètre.
+ *
+ * `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`.
+ *
+ * @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider`
+ * @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte.
+ */
+declare function useTheme<T>(name: string, ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]): ToBem<T>;
+//#endregion
+export { type CSSContext, type CSSElement, type CSSMod, type CSSProp, type CSSToStrings, type FocusCSSContext, ThemeContext, ThemeProvider, type ThemeProviderProps, type ToBem, fromBem, getDefaultTransition, getSpringTransition, themeable, toBem, uiConfig, useTheme };
+//# sourceMappingURL=focus4.styling.d.ts.map

package/lib/focus4.styling.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus4.styling.d.ts","names":[],"sources":["../src/animation.ts","../src/config.ts","../src/theme/common.ts","../src/theme/themeable.ts","../src/theme/theme-provider.tsx","../src/theme/to-bem.ts","../src/theme/use-theme.ts"],"mappings":"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"}

package/lib/focus4.styling.js

@@ -0,0 +1,173 @@
+import { createContext, useContext, useMemo } from "react";
+import classNames from "classnames";
+import { pick } from "es-toolkit";
+import { jsx } from "react/jsx-runtime";
+//#region src/animation.ts
+function get() {
+	const { animationDelay, animationDuration, animationTimingFunction } = window.getComputedStyle(document.body);
+	return {
+		delay: toMs(animationDelay),
+		duration: toMs(animationDuration),
+		ease: animationTimingFunction.startsWith("cubic-bezier") ? animationTimingFunction.slice(13).split(",").map(parseFloat) : void 0
+	};
+}
+/** Récupère les paramètres de transition par défaut, à partir des variables CSS correspondantes. */
+function getDefaultTransition() {
+	const { delay, duration, ease } = get();
+	return {
+		delay: delay / 1e3,
+		duration: duration / 1e3,
+		ease
+	};
+}
+/** Récupère les paramètres de transition "spring" par défaut. */
+function getSpringTransition() {
+	return {
+		type: "spring",
+		bounce: 0,
+		duration: get().duration / 1e3
+	};
+}
+function toMs(d) {
+	if (d.endsWith("ms")) return +d.slice(0, -2);
+	else return +d.slice(0, -1) * 1e3;
+}
+//#endregion
+//#region src/config.ts
+/** Config Focus de l'application */
+const uiConfig = {
+	autocompleteOffValue: /Firefox/.test(navigator.userAgent) ? "off" : "one-time-code",
+	defaultIconClassName: "material-symbols-outlined"
+};
+//#endregion
+//#region src/theme/common.ts
+const ThemeContext = createContext({});
+//#endregion
+//#region src/theme/themeable.ts
+/** Merges passed themes by concatenating string keys */
+function themeable(...themes) {
+	return themes.reduce(merge, {});
+}
+function merge(original = {}, mixin = {}) {
+	const result = Object.keys(original).reduce((acc, key) => {
+		const value = original[key];
+		if (typeof value !== "function") acc[key] = value;
+		return acc;
+	}, {});
+	for (const key in mixin) {
+		const originalValue = result[key];
+		const mixinValue = mixin[key];
+		switch (typeof mixinValue) {
+			case "undefined":
+			case "function": break;
+			default:
+				switch (typeof originalValue) {
+					case "undefined":
+						result[key] = mixinValue;
+						break;
+					case "function": break;
+					default:
+						result[key] = [...originalValue.split(" "), ...mixinValue.split(" ")].filter((item, pos, self) => self.indexOf(item) === pos && item !== "").join(" ");
+						break;
+				}
+				break;
+		}
+	}
+	return result;
+}
+//#endregion
+//#region src/theme/to-bem.ts
+/**
+* `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM
+* en un objet contenant une fonction par "élément" à laquelle on peut appliquer ses "modificateurs".
+*
+* Par exemple, un objet contenant les classes
+* ```ts
+* ["panel", "panel--editing", "panel--loading", "title", "title--top", "title--bottom"]
+* ```
+* sera transformé en un objet avec 2 fonctions `panel` et `title` :
+* ```ts
+* {
+*     panel({editing?: boolean; loading?: boolean}) => string;
+*     title({top?: boolean; bottom?: boolean}) => string;
+* }
+* ```
+* Un appel à une fonction retournera la classe CSS de l'"élément", à laquelle seront ajoutées ou non les classes des différents "modificateurs",
+* selon les valeurs des différents booléens.
+*
+* Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres.
+* Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange.
+*
+* _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._
+*
+* _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._
+*/
+function toBem(css) {
+	const data = {};
+	for (const key in css) {
+		const [element, modifier] = key.split("--");
+		if (data[element] && modifier) data[element].push(modifier);
+		else if (!data[element]) data[element] = modifier ? [modifier] : [];
+	}
+	return Object.keys(data).reduce((bem, key) => ({
+		...bem,
+		[key]: (mods = {}) => {
+			if (mods !== true) return classNames(css[key], ...data[key].filter((mod) => mods[mod]).map((mod) => css[`${key}--${mod}`]));
+			else return pick(css, [key, ...data[key].map((mod) => `${key}--${mod}`)]);
+		}
+	}), {});
+}
+/**
+* `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet
+* qui contient toutes les classes CSS qui le compose.
+*/
+function fromBem(css) {
+	const res = {};
+	for (const key in css) {
+		const value = css[key];
+		if (value) if (typeof value === "string") res[key] = value;
+		else Object.assign(res, value(true));
+	}
+	return res;
+}
+//#endregion
+//#region src/theme/theme-provider.tsx
+/**
+* Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés
+* à l'intérieur (via un context React).
+*
+* Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent,
+* y compris sur les mêmes composants.
+*/
+function ThemeProvider({ appTheme, children }) {
+	const context = useContext(ThemeContext);
+	const mergedContext = useMemo(() => {
+		const mc = {};
+		for (const key in context) if (key in appTheme && appTheme[key]) mc[key] = themeable(fromBem(context[key]), fromBem(appTheme[key]));
+		else mc[key] = context[key];
+		for (const key in appTheme) if (!(key in context) && appTheme[key]) mc[key] = appTheme[key];
+		return mc;
+	}, [appTheme, context]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: mergedContext,
+		children
+	});
+}
+//#endregion
+//#region src/theme/use-theme.ts
+/**
+* `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS
+* passées en paramètre.
+*
+* `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`.
+*
+* @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider`
+* @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte.
+*/
+function useTheme(name, ...themes) {
+	return toBem(themeable(fromBem(useContext(ThemeContext)[name]) || {}, ...themes.filter((x) => x).map((x) => fromBem(x))));
+}
+//#endregion
+export { ThemeContext, ThemeProvider, fromBem, getDefaultTransition, getSpringTransition, themeable, toBem, uiConfig, useTheme };
+
+//# sourceMappingURL=focus4.styling.js.map

package/lib/focus4.styling.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus4.styling.js","names":[],"sources":["../src/animation.ts","../src/config.ts","../src/theme/common.ts","../src/theme/themeable.ts","../src/theme/to-bem.ts","../src/theme/theme-provider.tsx","../src/theme/use-theme.ts"],"sourcesContent":["function get() {\r\n    const {animationDelay, animationDuration, animationTimingFunction} = window.getComputedStyle(document.body);\r\n\r\n    const delay = toMs(animationDelay);\r\n    const duration = toMs(animationDuration);\r\n    const ease = animationTimingFunction.startsWith(\"cubic-bezier\")\r\n        ? (animationTimingFunction.slice(13).split(\",\").map(parseFloat) as [number, number, number, number])\r\n        : undefined;\r\n\r\n    return {delay, duration, ease};\r\n}\r\n\r\n/** Récupère les paramètres de transition par défaut, à partir des variables CSS correspondantes. */\r\nexport function getDefaultTransition() {\r\n    const {delay, duration, ease} = get();\r\n    return {\r\n        delay: delay / 1000,\r\n        duration: duration / 1000,\r\n        ease\r\n    } as const;\r\n}\r\n\r\n/** Récupère les paramètres de transition \"spring\" par défaut. */\r\nexport function getSpringTransition() {\r\n    return {\r\n        type: \"spring\",\r\n        bounce: 0,\r\n        duration: get().duration / 1000\r\n    } as const;\r\n}\r\n\r\nfunction toMs(d: string) {\r\n    if (d.endsWith(\"ms\")) {\r\n        return +d.slice(0, -2);\r\n    } else {\r\n        return +d.slice(0, -1) * 1000;\r\n    }\r\n}\r\n","/** Config Focus de l'application */\r\nexport const uiConfig = {\r\n    /** Valeur de \"autocomplete\" sur les inputs pour lesquels on ne veut pas d'autocomplétion. */\r\n    autocompleteOffValue: /Firefox/.test(navigator.userAgent) ? \"off\" : \"one-time-code\",\r\n\r\n    /** Classe CSS par défaut des icônes. */\r\n    defaultIconClassName: \"material-symbols-outlined\"\r\n};\r\n","import {createContext} from \"react\";\r\n\r\nexport type CSSElement<T> = T & string & {_element: void};\r\nexport type CSSMod<N extends string, T> = N & T & string & {_mod: void};\r\nexport type CSSToStrings<T> = {[P in keyof T]?: string};\r\n\r\nexport type Mods<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never}[keyof CSS];\r\nexport type ModNames<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never}[keyof CSS];\r\nexport type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {\r\n    [_ in ModNames<CSS, E> | P]: string;\r\n}) &\r\n    (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {[_ in Mods<CSS, E>]?: boolean}) => string);\r\n\r\nexport interface CSSContext {\r\n    [key: string]: object;\r\n}\r\n\r\nexport const ThemeContext = createContext<CSSContext>({});\r\n","/** Merges passed themes by concatenating string keys */\r\nexport function themeable<T extends object>(...themes: T[]) {\r\n    return themes.reduce(merge, {}) as T;\r\n}\r\n\r\nfunction merge<T extends {[key: string]: string}>(original = {} as T, mixin = {} as T) {\r\n    /*\r\n     * Make a copy to avoid mutations of nested objects\r\n     * also strip all functions injected by isomorphic-style-loader\r\n     */\r\n    const result = Object.keys(original).reduce(\r\n        (acc, key) => {\r\n            const value = original[key];\r\n            if (typeof value !== \"function\") {\r\n                acc[key] = value;\r\n            }\r\n            return acc;\r\n        },\r\n        {} as {[key: string]: string}\r\n    );\r\n\r\n    // Traverse mixin keys and merge them to resulting theme\r\n    for (const key in mixin) {\r\n        // There's no need to set any defaults here\r\n        const originalValue = result[key];\r\n        const mixinValue = mixin[key];\r\n\r\n        switch (typeof mixinValue) {\r\n            case \"undefined\": // Fallthrough - handles accidentally unset values which may come from props\r\n            case \"function\":\r\n                // This handles issue when isomorphic-style-loader addes helper functions to css-module\r\n                break; // Just skip\r\n\r\n            default:\r\n                // Plain values\r\n                switch (typeof originalValue) {\r\n                    case \"undefined\":\r\n                        // Mixin key is new to original theme - take it as is\r\n                        result[key] = mixinValue;\r\n                        break;\r\n\r\n                    case \"function\":\r\n                        // This handles issue when isomorphic-style-loader addes helper functions to css-module\r\n                        break; // Just skip\r\n\r\n                    default:\r\n                        // Finally we can merge\r\n                        result[key] = [...originalValue.split(\" \"), ...mixinValue.split(\" \")]\r\n                            .filter((item, pos, self) => self.indexOf(item) === pos && item !== \"\")\r\n                            .join(\" \");\r\n                        break;\r\n                }\r\n                break;\r\n        }\r\n    }\r\n\r\n    return result;\r\n}\r\n","import classNames from \"classnames\";\r\nimport {pick} from \"es-toolkit\";\r\n\r\nimport {BemFunction, CSSElement, CSSMod, CSSToStrings} from \"./common\";\r\n\r\nexport type AllMods<CSS> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never}[keyof CSS];\r\nexport type ToBem<CSS> = Omit<\r\n    {\r\n        [P in keyof CSS]-?: CSS[P] extends CSSElement<infer E>\r\n            ? BemFunction<CSS, P, E>\r\n            : CSS[P] extends CSSMod<infer __, infer ___>\r\n              ? never\r\n              : BemFunction<CSS, P, string>;\r\n    },\r\n    AllMods<CSS>\r\n>;\r\n\r\nexport type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;\r\n\r\n/**\r\n * `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM\r\n * en un objet contenant une fonction par \"élément\" à laquelle on peut appliquer ses \"modificateurs\".\r\n *\r\n * Par exemple, un objet contenant les classes\r\n * ```ts\r\n * [\"panel\", \"panel--editing\", \"panel--loading\", \"title\", \"title--top\", \"title--bottom\"]\r\n * ```\r\n * sera transformé en un objet avec 2 fonctions `panel` et `title` :\r\n * ```ts\r\n * {\r\n *     panel({editing?: boolean; loading?: boolean}) => string;\r\n *     title({top?: boolean; bottom?: boolean}) => string;\r\n * }\r\n * ```\r\n * Un appel à une fonction retournera la classe CSS de l'\"élément\", à laquelle seront ajoutées ou non les classes des différents \"modificateurs\",\r\n * selon les valeurs des différents booléens.\r\n *\r\n * Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres.\r\n * Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange.\r\n *\r\n * _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._\r\n *\r\n * _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._\r\n */\r\nexport function toBem<CSS>(css: CSS): ToBem<CSS> {\r\n    const data: {[key: string]: string[]} = {};\r\n    for (const key in css) {\r\n        const [element, modifier] = key.split(\"--\");\r\n        if (data[element] && modifier) {\r\n            data[element].push(modifier);\r\n        } else if (!data[element]) {\r\n            data[element] = modifier ? [modifier] : [];\r\n        }\r\n    }\r\n\r\n    return Object.keys(data).reduce(\r\n        (bem, key) => ({\r\n            ...bem,\r\n            [key]: (mods: true | {[key: string]: boolean} = {}) => {\r\n                if (mods !== true) {\r\n                    return classNames(\r\n                        (css as any)[key],\r\n                        ...data[key].filter(mod => mods[mod]).map(mod => (css as any)[`${key}--${mod}`])\r\n                    );\r\n                } else {\r\n                    return pick(css as any, [key, ...data[key].map(mod => `${key}--${mod}`)]);\r\n                }\r\n            }\r\n        }),\r\n        {}\r\n    ) as ToBem<CSS>;\r\n}\r\n\r\n/**\r\n * `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet\r\n * qui contient toutes les classes CSS qui le compose.\r\n */\r\nexport function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T> {\r\n    const res: CSSToStrings<T> = {};\r\n\r\n    for (const key in css as any) {\r\n        const value = (css as any)[key];\r\n        if (value) {\r\n            if (typeof value === \"string\") {\r\n                (res as any)[key] = value;\r\n            } else {\r\n                Object.assign(res, value(true));\r\n            }\r\n        }\r\n    }\r\n\r\n    return res;\r\n}\r\n","import {ReactNode, useContext, useMemo} from \"react\";\r\n\r\nimport {CSSContext, ThemeContext} from \"./common\";\r\nimport {themeable} from \"./themeable\";\r\nimport {fromBem} from \"./to-bem\";\r\n\r\n/** Contient l'ensemble des classes CSS surchargeables (elles le sont toutes), regroupées par composant. */\r\nexport interface FocusCSSContext extends CSSContext {\r\n    // Collections\r\n    actionBar: object;\r\n    advancedSearch: object;\r\n    contextualActions: object;\r\n    facet: object;\r\n    facetBox: object;\r\n    group: object;\r\n    list: object;\r\n    listBase: object;\r\n    searchBar: object;\r\n    summary: object;\r\n    table: object;\r\n    timeline: object;\r\n\r\n    // Forms\r\n    booleanRadio: object;\r\n    display: object;\r\n    field: object;\r\n    form: object;\r\n    inputDate: object;\r\n    inputFile: object;\r\n    label: object;\r\n    select: object;\r\n    selectCheckbox: object;\r\n    selectChips: object;\r\n    selectRadio: object;\r\n\r\n    // Layout\r\n    dialog: object;\r\n    filAriane: object;\r\n    header: object;\r\n    lateralMenu: object;\r\n    layout: object;\r\n    mainMenu: object;\r\n    overlay: object;\r\n    panel: object;\r\n    popin: object;\r\n    scrollable: object;\r\n    scrollspy: object;\r\n\r\n    // Toolbox\r\n    autocomplete: object;\r\n    button: object;\r\n    calendar: object;\r\n    checkbox: object;\r\n    chip: object;\r\n    dropdown: object;\r\n    floatingActionButton: object;\r\n    iconButton: object;\r\n    menu: object;\r\n    progressIndicator: object;\r\n    radio: object;\r\n    ripple: object;\r\n    slider: object;\r\n    snackbar: object;\r\n    supportingText: object;\r\n    switch: object;\r\n    textField: object;\r\n    tabs: object;\r\n    tooltip: object;\r\n}\r\n\r\n/** Props du ThemeProvider. */\r\nexport interface ThemeProviderProps {\r\n    /** Objet faisant correspondre à un identifiant de composant son objet de classes CSS associé.  */\r\n    appTheme: Partial<FocusCSSContext>;\r\n    /** Enfants. */\r\n    children: ReactNode;\r\n}\r\n\r\n/**\r\n * Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés\r\n * à l'intérieur (via un context React).\r\n *\r\n * Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent,\r\n * y compris sur les mêmes composants.\r\n */\r\nexport function ThemeProvider({appTheme, children}: ThemeProviderProps) {\r\n    const context = useContext(ThemeContext);\r\n\r\n    const mergedContext = useMemo(() => {\r\n        const mc = {} as CSSContext;\r\n\r\n        for (const key in context) {\r\n            if (key in appTheme && appTheme[key]) {\r\n                mc[key] = themeable(fromBem(context[key]), fromBem(appTheme[key]));\r\n            } else {\r\n                mc[key] = context[key];\r\n            }\r\n        }\r\n\r\n        for (const key in appTheme) {\r\n            if (!(key in context) && appTheme[key]) {\r\n                mc[key] = appTheme[key]!;\r\n            }\r\n        }\r\n        return mc;\r\n    }, [appTheme, context]);\r\n\r\n    return <ThemeContext.Provider value={mergedContext}>{children}</ThemeContext.Provider>;\r\n}\r\n","import {useContext} from \"react\";\r\n\r\nimport {CSSToStrings, ThemeContext} from \"./common\";\r\nimport {themeable} from \"./themeable\";\r\nimport {fromBem, toBem, ToBem} from \"./to-bem\";\r\n\r\n/**\r\n * `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS\r\n * passées en paramètre.\r\n *\r\n * `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`.\r\n *\r\n * @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider`\r\n * @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte.\r\n */\r\nexport function useTheme<T>(\r\n    name: string,\r\n    ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]\r\n): ToBem<T> {\r\n    const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};\r\n    return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x!))) as T);\r\n}\r\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@focus4/styling",
-    "version": "12.11.0",
+    "version": "12.11.1",
     "description": "Focus v4, styling module",
     "main": "lib/focus4.styling.js",
     "type": "module",
@@ -26,4 +26,4 @@
         "react": ">= 19 < 20",
         "react-dom": ">= 19 < 20"
     }
-}
+}