@rolster/react-components 19.9.0 → 19.10.0

package/dist/esm/components/molecules/AppThemeTabs/AppThemeTabs.d.ts

@@ -0,0 +1,13 @@
+import { RlsAppTheme } from '../../../types';
+import { PropsWithRlsTheme } from '../../definitions';
+export type AppThemeLabels = Partial<Record<RlsAppTheme, string>>;
+interface AppThemeTabsProps extends PropsWithRlsTheme {
+    labels?: AppThemeLabels;
+    onValue?: (value: RlsAppTheme) => void;
+    themes?: RlsAppTheme[];
+    value?: RlsAppTheme;
+}
+export declare const APP_THEMES: RlsAppTheme[];
+declare function RlsAppThemeTabsComponent({ labels, onValue, rlsTheme, themes, value }: AppThemeTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare const RlsAppThemeTabs: import("react").MemoExoticComponent<typeof RlsAppThemeTabsComponent>;
+export {};

package/dist/esm/components/molecules/AppThemeTabs/AppThemeTabs.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { getAppTheme, setAppTheme } from '../../../helpers/app-theme';
+import { reactI18n } from '../../../i18n';
+import { RlsTabs } from '../Tabs/Tabs';
+export const APP_THEMES = ['light', 'dim', 'dark'];
+const LABELS = {
+    light: () => reactI18n('appThemeLight'),
+    dim: () => reactI18n('appThemeDim'),
+    dark: () => reactI18n('appThemeDark')
+};
+function RlsAppThemeTabsComponent({ labels, onValue, rlsTheme, themes = APP_THEMES, value }) {
+    const [appTheme, setAppThemeValue] = useState(() => value ?? getAppTheme());
+    useEffect(() => {
+        if (value !== undefined) {
+            setAppTheme(value);
+            setAppThemeValue(value);
+        }
+    }, [value]);
+    const tabs = useMemo(() => {
+        return themes.map((theme) => ({
+            label: labels?.[theme] ?? LABELS[theme](),
+            value: theme
+        }));
+    }, [labels, themes]);
+    const onSelect = useCallback((theme) => {
+        setAppTheme(theme);
+        setAppThemeValue(theme);
+        onValue?.(theme);
+    }, [onValue]);
+    return (_jsx(RlsTabs, { tabs: tabs, value: appTheme, onValue: onSelect, rlsTheme: rlsTheme }));
+}
+export const RlsAppThemeTabs = memo(RlsAppThemeTabsComponent);
+//# sourceMappingURL=AppThemeTabs.js.map

package/dist/esm/components/molecules/AppThemeTabs/AppThemeTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppThemeTabs.js","sourceRoot":"","sources":["../../../../../src/components/molecules/AppThemeTabs/AppThemeTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAE,OAAO,EAAO,MAAM,cAAc,CAAC;AAW5C,MAAM,CAAC,MAAM,UAAU,GAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAElE,MAAM,MAAM,GAAsC;IAChD,KAAK,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,eAAe,CAAC;IACvC,GAAG,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,aAAa,CAAC;IACnC,IAAI,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,cAAc,CAAC;CACtC,CAAC;AAEF,SAAS,wBAAwB,CAAC,EAChC,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,GAAG,UAAU,EACnB,KAAK,EACa;IAClB,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAC3C,GAAG,EAAE,CAAC,KAAK,IAAI,WAAW,EAAE,CAC7B,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,WAAW,CAAC,KAAK,CAAC,CAAC;YACnB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,IAAI,GAAG,OAAO,CAAqB,GAAG,EAAE;QAC5C,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC5B,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE;YACzC,KAAK,EAAE,KAAK;SACb,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErB,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAkB,EAAE,EAAE;QACrB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAExB,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,QAAQ,EACf,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC"}

package/dist/esm/controllers/AppThemeController.d.ts

@@ -0,0 +1,7 @@
+import { RlsAppTheme } from '../types';
+export interface AppThemeController {
+    setValue: (value: RlsAppTheme) => void;
+    toggle: () => void;
+    value: RlsAppTheme;
+}
+export declare function useAppThemeController(initialTheme?: RlsAppTheme, primaryTheme?: RlsAppTheme, secondaryTheme?: RlsAppTheme): AppThemeController;

package/dist/esm/controllers/AppThemeController.js

@@ -0,0 +1,20 @@
+import { useCallback, useState } from 'react';
+import { getAppTheme, setAppTheme } from '../helpers/app-theme';
+export function useAppThemeController(initialTheme, primaryTheme = 'light', secondaryTheme = 'dark') {
+    const [appTheme, setAppThemeValue] = useState(() => {
+        if (initialTheme) {
+            setAppTheme(initialTheme);
+            return initialTheme;
+        }
+        return getAppTheme();
+    });
+    const setValue = useCallback((value) => {
+        setAppTheme(value);
+        setAppThemeValue(value);
+    }, []);
+    const toggle = useCallback(() => {
+        setValue(appTheme === primaryTheme ? secondaryTheme : primaryTheme);
+    }, [appTheme, primaryTheme, secondaryTheme, setValue]);
+    return { setValue, toggle, value: appTheme };
+}
+//# sourceMappingURL=AppThemeController.js.map

package/dist/esm/controllers/AppThemeController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppThemeController.js","sourceRoot":"","sources":["../../../src/controllers/AppThemeController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAShE,MAAM,UAAU,qBAAqB,CACnC,YAA0B,EAC1B,eAA4B,OAAO,EACnC,iBAA8B,MAAM;IAEpC,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAc,GAAG,EAAE;QAC9D,IAAI,YAAY,EAAE,CAAC;YACjB,WAAW,CAAC,YAAY,CAAC,CAAC;YAE1B,OAAO,YAAY,CAAC;QACtB,CAAC;QAED,OAAO,WAAW,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,KAAkB,EAAE,EAAE;QAClD,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,QAAQ,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;AAC/C,CAAC"}

package/dist/esm/helpers/app-theme.js

@@ -3,9 +3,8 @@ export function getAppTheme() {
     if (typeof document === 'undefined') {
         return 'light';
     }
-    return document.body.getAttribute(APP_THEME_ATTRIBUTE) === 'dark'
-        ? 'dark'
-        : 'light';
+    const theme = document.body.getAttribute(APP_THEME_ATTRIBUTE);
+    return theme === 'dark' || theme === 'dim' ? theme : 'light';
 }
 export function setAppTheme(theme) {
     if (typeof document === 'undefined') {

package/dist/esm/helpers/app-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-theme.js","sourceRoot":"","sources":["../../../src/helpers/app-theme.ts"],"names":[],"mappings":"AAEA,MAAM,mBAAmB,GAAG,WAAW,CAAC;AAExC,MAAM,UAAU,WAAW;IACzB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,KAAK,MAAM;QAC/D,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,OAAO,CAAC;AACd,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAkB;IAC5C,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO;IACT,CAAC;IAED,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAgB,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAEvE,WAAW,CAAC,KAAK,CAAC,CAAC;IAEnB,OAAO,KAAK,CAAC;AACf,CAAC"}
+{"version":3,"file":"app-theme.js","sourceRoot":"","sources":["../../../src/helpers/app-theme.ts"],"names":[],"mappings":"AAEA,MAAM,mBAAmB,GAAG,WAAW,CAAC;AAExC,MAAM,UAAU,WAAW;IACzB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;IAE9D,OAAO,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAkB;IAC5C,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO;IACT,CAAC;IAED,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,KAAK,GAAgB,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAEvE,WAAW,CAAC,KAAK,CAAC,CAAC;IAEnB,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/esm/i18n.d.ts

@@ -1,4 +1,7 @@
 export declare const reactI18n: import("@rolster/i18n").I18nTranslate<{
+    appThemeDark: string;
+    appThemeDim: string;
+    appThemeLight: string;
     confirmationActionApproved: string;
     dateActionCancel: string;
     dateActionSelect: string;

package/dist/esm/i18n.js

@@ -1,6 +1,9 @@
 import { i18n } from '@rolster/i18n';
 export const reactI18n = i18n({
     es: {
+        appThemeDark: 'Oscuro',
+        appThemeDim: 'Intermedio',
+        appThemeLight: 'Claro',
         confirmationActionApproved: 'Aceptar',
         dateActionCancel: 'Cancelar',
         dateActionSelect: 'Establecer',
@@ -13,6 +16,9 @@ export const reactI18n = i18n({
         listInputPlaceholder: 'Escriba palabre clave para filtrar...'
     },
     en: {
+        appThemeDark: 'Dark',
+        appThemeDim: 'Dim',
+        appThemeLight: 'Light',
         confirmationActionApproved: 'Approved',
         dateActionCancel: 'Cancel',
         dateActionSelect: 'Select',

package/dist/esm/i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../src/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC;IAC5B,EAAE,EAAE;QACF,0BAA0B,EAAE,SAAS;QACrC,gBAAgB,EAAE,UAAU;QAC5B,gBAAgB,EAAE,YAAY;QAC9B,eAAe,EAAE,KAAK;QACtB,wBAAwB,EAAE,UAAU;QACpC,wBAAwB,EAAE,WAAW;QACrC,uBAAuB,EAAE,aAAa;QACtC,oBAAoB,EAClB,2DAA2D;QAC7D,cAAc,EAAE,yBAAyB;QACzC,oBAAoB,EAAE,uCAAuC;KAC9D;IACD,EAAE,EAAE;QACF,0BAA0B,EAAE,UAAU;QACtC,gBAAgB,EAAE,QAAQ;QAC1B,gBAAgB,EAAE,QAAQ;QAC1B,eAAe,EAAE,OAAO;QACxB,wBAAwB,EAAE,QAAQ;QAClC,wBAAwB,EAAE,SAAS;QACnC,uBAAuB,EAAE,QAAQ;QACjC,oBAAoB,EAAE,iDAAiD;QACvE,cAAc,EAAE,yBAAyB;QACzC,oBAAoB,EAAE,4BAA4B;KACnD;CACF,CAAC,CAAC"}
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../src/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC;IAC5B,EAAE,EAAE;QACF,YAAY,EAAE,QAAQ;QACtB,WAAW,EAAE,YAAY;QACzB,aAAa,EAAE,OAAO;QACtB,0BAA0B,EAAE,SAAS;QACrC,gBAAgB,EAAE,UAAU;QAC5B,gBAAgB,EAAE,YAAY;QAC9B,eAAe,EAAE,KAAK;QACtB,wBAAwB,EAAE,UAAU;QACpC,wBAAwB,EAAE,WAAW;QACrC,uBAAuB,EAAE,aAAa;QACtC,oBAAoB,EAClB,2DAA2D;QAC7D,cAAc,EAAE,yBAAyB;QACzC,oBAAoB,EAAE,uCAAuC;KAC9D;IACD,EAAE,EAAE;QACF,YAAY,EAAE,MAAM;QACpB,WAAW,EAAE,KAAK;QAClB,aAAa,EAAE,OAAO;QACtB,0BAA0B,EAAE,UAAU;QACtC,gBAAgB,EAAE,QAAQ;QAC1B,gBAAgB,EAAE,QAAQ;QAC1B,eAAe,EAAE,OAAO;QACxB,wBAAwB,EAAE,QAAQ;QAClC,wBAAwB,EAAE,SAAS;QACnC,uBAAuB,EAAE,QAAQ;QACjC,oBAAoB,EAAE,iDAAiD;QACvE,cAAc,EAAE,yBAAyB;QACzC,oBAAoB,EAAE,4BAA4B;KACnD;CACF,CAAC,CAAC"}

package/dist/esm/index.d.ts

@@ -35,6 +35,7 @@ export * from './components/atoms/TabularText/TabularText';
 export * from './components/definitions';
 export * from './components/molecules/Accordion/Accordion';
 export * from './components/molecules/Alert/Alert';
+export * from './components/molecules/AppThemeTabs/AppThemeTabs';
 export * from './components/molecules/Ballot/Ballot';
 export * from './components/molecules/Body/Body';
 export * from './components/molecules/ButtonProgress/ButtonProgress';
@@ -101,6 +102,7 @@ export * from './components/organisms/PickerDateRange/PickerDateRange';
 export * from './components/organisms/Snackbar/Snackbar';
 export type { FieldProps, InputProps, RolsterReactInputControl } from './components/types';
 export * from './context';
+export * from './controllers/AppThemeController';
 export * from './controllers/DatatableController';
 export * from './controllers/DesingSystemController';
 export * from './controllers/DropdownController';

package/dist/esm/index.js

@@ -35,6 +35,7 @@ export * from './components/atoms/TabularText/TabularText';
 export * from './components/definitions';
 export * from './components/molecules/Accordion/Accordion';
 export * from './components/molecules/Alert/Alert';
+export * from './components/molecules/AppThemeTabs/AppThemeTabs';
 export * from './components/molecules/Ballot/Ballot';
 export * from './components/molecules/Body/Body';
 export * from './components/molecules/ButtonProgress/ButtonProgress';
@@ -100,6 +101,7 @@ export * from './components/organisms/PickerDate/PickerDate';
 export * from './components/organisms/PickerDateRange/PickerDateRange';
 export * from './components/organisms/Snackbar/Snackbar';
 export * from './context';
+export * from './controllers/AppThemeController';
 export * from './controllers/DatatableController';
 export * from './controllers/DesingSystemController';
 export * from './controllers/DropdownController';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/types.d.ts

@@ -1,6 +1,6 @@
 import 'react';
-export type RlsTheme = 'standard' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'warning' | 'danger' | 'berry' | 'hope' | 'mountains' | 'ross' | 'amaizing' | 'purple' | 'amber' | 'smartness' | 'obsidian';
-export type RlsAppTheme = 'light' | 'dark';
+export type RlsTheme = 'standard' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'warning' | 'danger' | 'berry' | 'hope' | 'mountains' | 'ross' | 'amaizing' | 'purple' | 'amber' | 'smartness' | 'obsidian' | 'neutral';
+export type RlsAppTheme = 'light' | 'dim' | 'dark';
 export type RlsDesignSystem = 'bordered' | 'filled' | 'gradient';
 export type RlsButtonType = 'ghost' | 'flat' | 'raised';
 declare module 'react' {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/react-components",
-  "version": "19.9.0",
+  "version": "19.10.0",
   "type": "module",
   "description": "Package containing UI components for React Project.",
   "license": "MIT",
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@rolster/rollup": "^2.2.0",
-    "@rolster/styles-foundations": "^3.5.24",
+    "@rolster/styles-foundations": "^3.7.0",
     "@rolster/types": "^1.1.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

package/readme.md

@@ -168,6 +168,7 @@ function Header({ requesting, onSave }: HeaderProps) {
 | ------------------------- | ---------------------------------------------------------------------------------------- |
 | `RlsAccordion`            | Collapsible section with title and indicator, animated on the height of its content      |
 | `RlsAlert`                | Message block with optional icon and bordered variant                                    |
+| `RlsAppThemeTabs`         | Tab bar with the application themes that writes the selected one on the body             |
 | `RlsBallot`               | Avatar, title and subtitle row, with skeleton state                                      |
 | `RlsBody`                 | Body container of an application page                                                    |
 | `RlsButtonProgress`       | Action button surrounded by a circular progress while `progressing`                      |
@@ -301,27 +302,28 @@ function Assignment({ persons }: { persons: Person[] }) {
 
 ### Hooks
 
-| Hook                                                 | Description                                                                           |
-| ---------------------------------------------------- | ------------------------------------------------------------------------------------- |
-| `useRlsContext(): RlsState`                          | Reads the context of `RlsApplication`; throws when the wrapper is missing             |
-| `useConfirmation(): ConfirmationService`             | Creates the `confirmation` function and the `RlsConfirmation` node that renders it    |
-| `useNotifications(): NotificationsService`           | Creates the `notify` function and the `RlsNotifications` node with the stack          |
-| `useSnackbar(): SnackbarService`                     | Creates the `snackbar` function and the `RlsSnackbar` node that renders it            |
-| `useFieldAutocomplete(props)`                        | State of an autocomplete field: coincidences, pattern, references and event handlers  |
-| `useFieldList(props)`                                | State of a multiple selection field: selected elements, references and event handlers |
-| `useFieldSelect(props)`                              | State of a single selection field: value, references and event handlers               |
-| `useListController(props)`                           | Base of the previous ones: visibility, keyboard navigation and writing to the control |
-| `useDatatable(table?): DatatableController`          | Observes the body of a table and reports whether it is scrollable                     |
-| `useDesingSystemController(primary?, secondary?)`    | Applies a design system and toggles between two of them                               |
-| `useDropdownController(effect?): DropdownController` | Opens a `RlsDropdown` at a position or from a mouse event                             |
-| `usePortalController(): PortalController`            | Visibility of modals, sheets and navigation panels                                    |
-| `useTabsController(options): TabsController`         | Creates the control of a tab bar and the `Tabs` node bound to it                      |
-| `useImageEditorController(options)`                  | Opens the file selector and the image editor, and returns the node that renders them  |
-| `useFormSingleSelectionController(props)`            | `checked` state and selection of a value over a control                               |
-| `useFormToggleController(props)`                     | `checked` state and toggle of a `boolean` control                                     |
-| `useResize({ refElement, onResize })`                | Reports the dimensions of an element when it changes size                             |
-| `useRelocationOnComponent({ container, element })`   | Allows dragging an element inside its container                                       |
-| `useEventCallback(callback)`                         | Returns a stable function that always calls the last received callback                |
+| Hook                                                    | Description                                                                           |
+| ------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| `useRlsContext(): RlsState`                             | Reads the context of `RlsApplication`; throws when the wrapper is missing             |
+| `useConfirmation(): ConfirmationService`                | Creates the `confirmation` function and the `RlsConfirmation` node that renders it    |
+| `useNotifications(): NotificationsService`              | Creates the `notify` function and the `RlsNotifications` node with the stack          |
+| `useSnackbar(): SnackbarService`                        | Creates the `snackbar` function and the `RlsSnackbar` node that renders it            |
+| `useFieldAutocomplete(props)`                           | State of an autocomplete field: coincidences, pattern, references and event handlers  |
+| `useFieldList(props)`                                   | State of a multiple selection field: selected elements, references and event handlers |
+| `useFieldSelect(props)`                                 | State of a single selection field: value, references and event handlers               |
+| `useListController(props)`                              | Base of the previous ones: visibility, keyboard navigation and writing to the control |
+| `useDatatable(table?): DatatableController`             | Observes the body of a table and reports whether it is scrollable                     |
+| `useDesingSystemController(primary?, secondary?)`       | Applies a design system and toggles between two of them                               |
+| `useAppThemeController(initial?, primary?, secondary?)` | Applies an application theme and toggles between two of them                          |
+| `useDropdownController(effect?): DropdownController`    | Opens a `RlsDropdown` at a position or from a mouse event                             |
+| `usePortalController(): PortalController`               | Visibility of modals, sheets and navigation panels                                    |
+| `useTabsController(options): TabsController`            | Creates the control of a tab bar and the `Tabs` node bound to it                      |
+| `useImageEditorController(options)`                     | Opens the file selector and the image editor, and returns the node that renders them  |
+| `useFormSingleSelectionController(props)`               | `checked` state and selection of a value over a control                               |
+| `useFormToggleController(props)`                        | `checked` state and toggle of a `boolean` control                                     |
+| `useResize({ refElement, onResize })`                   | Reports the dimensions of an element when it changes size                             |
+| `useRelocationOnComponent({ container, element })`      | Allows dragging an element inside its container                                       |
+| `useEventCallback(callback)`                            | Returns a stable function that always calls the last received callback                |
 
 ```tsx
 import { RlsButton, useRlsContext } from '@rolster/react-components';
@@ -354,12 +356,12 @@ function DeleteAction({ person }: { person: Person }) {
 
 ### Theme and design system
 
-The application theme is written on the `app-theme` attribute of `document.body`, and the colors of a theme are written as custom properties on that same element.
+The application theme is written on the `app-theme` attribute of `document.body`, and the colors of a theme are written as custom properties on that same element. The themes are `light`, `dim` and `dark`, as declared by `@rolster/styles-foundations`; `RlsAppThemeTabs` renders them as a tab bar and applies the selected one, with translated labels that the `labels` prop can override.
 
 | Function                                 | Description                                                                  |
 | ---------------------------------------- | ---------------------------------------------------------------------------- |
 | `getAppTheme(): RlsAppTheme`             | Current theme, `light` when nothing has been set                             |
-| `setAppTheme(theme)`                     | Writes `light` or `dark` on the application body                             |
+| `setAppTheme(theme)`                     | Writes `light`, `dim` or `dark` on the application body                      |
 | `toggleAppTheme(): RlsAppTheme`          | Switches between `light` and `dark`, and returns the applied theme           |
 | `setDesignSystem(designSystem?)`         | Writes the class of the design system on the body and removes the other ones |
 | `generateThemePalette(color, theme?)`    | Builds a `ThemePalette` of eleven shades from a hexadecimal color            |
@@ -398,7 +400,7 @@ toggleAppTheme(); // 'dark'
 | Type                             | Description                                                                     |
 | -------------------------------- | ------------------------------------------------------------------------------- |
 | `RlsTheme`                       | Color theme of a component, applied with the `rlsTheme` prop                    |
-| `RlsAppTheme`                    | Application theme, `light` or `dark`                                            |
+| `RlsAppTheme`                    | Application theme, `light`, `dim` or `dark`                                     |
 | `RlsDesignSystem`                | Design system, `bordered`, `filled` or `gradient`                               |
 | `RlsButtonType`                  | Button style, `ghost`, `flat` or `raised`                                       |
 | `PropsWithClassName`             | Props with an optional `className`                                              |
@@ -414,6 +416,7 @@ toggleAppTheme(); // 'dark'
 | `NotificationsConfig`            | Configuration of a notification, a `SnackbarConfig` plus `duration`             |
 | `PaginationEvent<T>`             | Event of `RlsPagination`: page, limits and suggestions of the page              |
 | `Tab<T>`                         | Tab of `RlsTabs`: label, value and disabled state                               |
+| `AppThemeLabels`                 | Labels of `RlsAppThemeTabs`, one optional string per application theme          |
 | `NavbarMenuOption`               | Option of `RlsNavbarMenu`: identifier, icon and label                           |
 | `ImageEditorValue`               | Result of the image editor: `base64` and `blob`                                 |
 | `ThemePalette`                   | Palette generated for a theme: shades, custom properties and CSS                |