@rolster/react-components 19.9.0 → 19.10.0

package/dist/cjs/index.cjs

@@ -1472,6 +1472,132 @@ function RlsAlertComponent({ bordered, children, icon, identifier, rlsTheme }) {
 }
 const RlsAlert = require$$0.memo(RlsAlertComponent);
 
+const APP_THEME_ATTRIBUTE = 'app-theme';
+function getAppTheme() {
+    if (typeof document === 'undefined') {
+        return 'light';
+    }
+    const theme = document.body.getAttribute(APP_THEME_ATTRIBUTE);
+    return theme === 'dark' || theme === 'dim' ? theme : 'light';
+}
+function setAppTheme(theme) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    document.body.setAttribute(APP_THEME_ATTRIBUTE, theme);
+}
+function toggleAppTheme() {
+    const theme = getAppTheme() === 'dark' ? 'light' : 'dark';
+    setAppTheme(theme);
+    return theme;
+}
+
+const reactI18n = i18n.i18n({
+    es: {
+        appThemeDark: 'Oscuro',
+        appThemeDim: 'Intermedio',
+        appThemeLight: 'Claro',
+        confirmationActionApproved: 'Aceptar',
+        dateActionCancel: 'Cancelar',
+        dateActionSelect: 'Establecer',
+        dateActionToday: 'Hoy',
+        chooserImageActionCancel: 'Cancelar',
+        editorImageActionRestore: 'Restaurar',
+        editorImageActionSelect: 'Seleccionar',
+        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
+        listEmptyTitle: 'Selección no disponible',
+        listInputPlaceholder: 'Escriba palabre clave para filtrar...'
+    },
+    en: {
+        appThemeDark: 'Dark',
+        appThemeDim: 'Dim',
+        appThemeLight: 'Light',
+        confirmationActionApproved: 'Approved',
+        dateActionCancel: 'Cancel',
+        dateActionSelect: 'Select',
+        dateActionToday: 'Today',
+        chooserImageActionCancel: 'Cancel',
+        editorImageActionRestore: 'Restore',
+        editorImageActionSelect: 'Select',
+        listEmptyDescription: 'Sorry, there are currently no items in the list',
+        listEmptyTitle: 'Selection not available',
+        listInputPlaceholder: 'Enter keyword to filter...'
+    }
+});
+
+function RlsTab({ disabled, onSelect, tab, value }) {
+    const className = renderClassStatus('rls-tabs__children', {
+        active: tab.value === value,
+        disabled: disabled || tab.disabled
+    });
+    const onClick = require$$0.useCallback(() => {
+        if (!disabled && !tab.disabled) {
+            onSelect(tab.value);
+        }
+    }, [disabled, tab.disabled, onSelect]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
+}
+function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
+    const [valueInternal, setValueInternal] = require$$0.useState();
+    const valueSelected = require$$0.useMemo(() => {
+        return formControl ? formControl.value : valueInternal;
+    }, [formControl?.value, valueInternal]);
+    const onSelect = require$$0.useCallback((value) => {
+        if (formControl) {
+            formControl?.setValue(value);
+        }
+        else {
+            setValueInternal(value);
+        }
+        onValue?.(value);
+    }, [formControl, onValue]);
+    require$$0.useEffect(() => {
+        if (formControl?.value !== undefined) {
+            return setValueInternal(formControl.value);
+        }
+        if (value !== undefined) {
+            return setValueInternal(value);
+        }
+        const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
+        if (initial) {
+            onSelect(initial.value);
+        }
+    }, [value, formControl?.value]);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
+            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, disabled: formControl?.disabled, value: valueSelected, onSelect: onSelect }, index));
+        }) }));
+}
+const RlsTabs = require$$0.memo(RlsTabsComponent);
+
+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] = require$$0.useState(() => value ?? getAppTheme());
+    require$$0.useEffect(() => {
+        if (value !== undefined) {
+            setAppTheme(value);
+            setAppThemeValue(value);
+        }
+    }, [value]);
+    const tabs = require$$0.useMemo(() => {
+        return themes.map((theme) => ({
+            label: labels?.[theme] ?? LABELS[theme](),
+            value: theme
+        }));
+    }, [labels, themes]);
+    const onSelect = require$$0.useCallback((theme) => {
+        setAppTheme(theme);
+        setAppThemeValue(theme);
+        onValue?.(theme);
+    }, [onValue]);
+    return (jsxRuntimeExports.jsx(RlsTabs, { tabs: tabs, value: appTheme, onValue: onSelect, rlsTheme: rlsTheme }));
+}
+const RlsAppThemeTabs = require$$0.memo(RlsAppThemeTabsComponent);
+
 function RlsBallotComponent({ bordered, className, children, img, initials, skeleton, subtitle, rlsTheme }) {
     const classNameBallot = renderClassStatus('rls-ballot', { bordered, skeleton }, className);
     return (jsxRuntimeExports.jsxs("div", { className: classNameBallot, "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntimeExports.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntimeExports.jsx("img", { src: img }), initials && jsxRuntimeExports.jsx("span", { children: initials })] })), jsxRuntimeExports.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntimeExports.jsx("div", { className: "rls-ballot__title", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntimeExports.jsx("div", { className: "rls-ballot__subtitle", children: jsxRuntimeExports.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
@@ -1759,33 +1885,6 @@ function RlsFieldFileComponent({ accept, children, disabled: _disabled, formCont
 }
 const RlsFieldFile = require$$0.memo(RlsFieldFileComponent);
 
-const reactI18n = i18n.i18n({
-    es: {
-        confirmationActionApproved: 'Aceptar',
-        dateActionCancel: 'Cancelar',
-        dateActionSelect: 'Establecer',
-        dateActionToday: 'Hoy',
-        chooserImageActionCancel: 'Cancelar',
-        editorImageActionRestore: 'Restaurar',
-        editorImageActionSelect: 'Seleccionar',
-        listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
-        listEmptyTitle: 'Selección no disponible',
-        listInputPlaceholder: 'Escriba palabre clave para filtrar...'
-    },
-    en: {
-        confirmationActionApproved: 'Approved',
-        dateActionCancel: 'Cancel',
-        dateActionSelect: 'Select',
-        dateActionToday: 'Today',
-        chooserImageActionCancel: 'Cancel',
-        editorImageActionRestore: 'Restore',
-        editorImageActionSelect: 'Select',
-        listEmptyDescription: 'Sorry, there are currently no items in the list',
-        listEmptyTitle: 'Selection not available',
-        listInputPlaceholder: 'Enter keyword to filter...'
-    }
-});
-
 function useEventCallback(callback) {
     const refCallback = require$$0.useRef(callback);
     require$$0.useInsertionEffect(() => {
@@ -2696,50 +2795,6 @@ function RlsSliderComponent({ children, className, disabled, formControl, identi
 }
 const RlsSlider = require$$0.memo(RlsSliderComponent);
 
-function RlsTab({ disabled, onSelect, tab, value }) {
-    const className = renderClassStatus('rls-tabs__children', {
-        active: tab.value === value,
-        disabled: disabled || tab.disabled
-    });
-    const onClick = require$$0.useCallback(() => {
-        if (!disabled && !tab.disabled) {
-            onSelect(tab.value);
-        }
-    }, [disabled, tab.disabled, onSelect]);
-    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
-}
-function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
-    const [valueInternal, setValueInternal] = require$$0.useState();
-    const valueSelected = require$$0.useMemo(() => {
-        return formControl ? formControl.value : valueInternal;
-    }, [formControl?.value, valueInternal]);
-    const onSelect = require$$0.useCallback((value) => {
-        if (formControl) {
-            formControl?.setValue(value);
-        }
-        else {
-            setValueInternal(value);
-        }
-        onValue?.(value);
-    }, [formControl, onValue]);
-    require$$0.useEffect(() => {
-        if (formControl?.value !== undefined) {
-            return setValueInternal(formControl.value);
-        }
-        if (value !== undefined) {
-            return setValueInternal(value);
-        }
-        const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
-        if (initial) {
-            onSelect(initial.value);
-        }
-    }, [value, formControl?.value]);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
-            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, disabled: formControl?.disabled, value: valueSelected, onSelect: onSelect }, index));
-        }) }));
-}
-const RlsTabs = require$$0.memo(RlsTabsComponent);
-
 function RlsToolbarComponent({ actions, children, subtitle }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-toolbar", children: [jsxRuntimeExports.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntimeExports.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntimeExports.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx("div", { children: action }, index))) }))] }));
 }
@@ -5224,6 +5279,24 @@ function RlsApplication({ children }) {
     return (jsxRuntimeExports.jsxs(RlsContext, { value: state, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, jsxRuntimeExports.jsx(RlsSnackbar, {})] }), jsxRuntimeExports.jsx(RlsConfirmation, {}), jsxRuntimeExports.jsx(RlsNotifications, {})] }));
 }
 
+function useAppThemeController(initialTheme, primaryTheme = 'light', secondaryTheme = 'dark') {
+    const [appTheme, setAppThemeValue] = require$$0.useState(() => {
+        if (initialTheme) {
+            setAppTheme(initialTheme);
+            return initialTheme;
+        }
+        return getAppTheme();
+    });
+    const setValue = require$$0.useCallback((value) => {
+        setAppTheme(value);
+        setAppThemeValue(value);
+    }, []);
+    const toggle = require$$0.useCallback(() => {
+        setValue(appTheme === primaryTheme ? secondaryTheme : primaryTheme);
+    }, [appTheme, primaryTheme, secondaryTheme, setValue]);
+    return { setValue, toggle, value: appTheme };
+}
+
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
 
 const DESIGN_SYSTEM_PREFIX = 'rls-design-system';
@@ -5357,32 +5430,13 @@ function useTabsController(options) {
     return require$$0.useMemo(() => ({ Tabs, formControl }), [Tabs, formControl]);
 }
 
-const APP_THEME_ATTRIBUTE = 'app-theme';
-function getAppTheme() {
-    if (typeof document === 'undefined') {
-        return 'light';
-    }
-    return document.body.getAttribute(APP_THEME_ATTRIBUTE) === 'dark'
-        ? 'dark'
-        : 'light';
-}
-function setAppTheme(theme) {
-    if (typeof document === 'undefined') {
-        return;
-    }
-    document.body.setAttribute(APP_THEME_ATTRIBUTE, theme);
-}
-function toggleAppTheme() {
-    const theme = getAppTheme() === 'dark' ? 'light' : 'dark';
-    setAppTheme(theme);
-    return theme;
-}
-
+exports.APP_THEMES = APP_THEMES;
 exports.ConfirmationResult = ConfirmationResult;
 exports.DEFAULT_COLOR = DEFAULT_COLOR;
 exports.RlsAccordion = RlsAccordion;
 exports.RlsAlert = RlsAlert;
 exports.RlsAmount = RlsAmount;
+exports.RlsAppThemeTabs = RlsAppThemeTabs;
 exports.RlsApplication = RlsApplication;
 exports.RlsAreaText = RlsAreaText;
 exports.RlsAvatar = RlsAvatar;
@@ -5516,6 +5570,7 @@ exports.setDesignSystem = setDesignSystem;
 exports.setErrorsI18n = setErrorsI18n;
 exports.setThemeColor = setThemeColor;
 exports.toggleAppTheme = toggleAppTheme;
+exports.useAppThemeController = useAppThemeController;
 exports.useConfirmation = useConfirmation;
 exports.useDatatable = useDatatable;
 exports.useDesingSystemController = useDesingSystemController;