@rolster/react-components 19.9.0 → 19.10.0

package/dist/es/index.mjs

@@ -1470,6 +1470,132 @@ function RlsAlertComponent({ bordered, children, icon, identifier, rlsTheme }) {
 }
 const RlsAlert = 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({
+    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 = 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] = useState();
+    const valueSelected = useMemo(() => {
+        return formControl ? formControl.value : valueInternal;
+    }, [formControl?.value, valueInternal]);
+    const onSelect = useCallback((value) => {
+        if (formControl) {
+            formControl?.setValue(value);
+        }
+        else {
+            setValueInternal(value);
+        }
+        onValue?.(value);
+    }, [formControl, onValue]);
+    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 = 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] = 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 (jsxRuntimeExports.jsx(RlsTabs, { tabs: tabs, value: appTheme, onValue: onSelect, rlsTheme: rlsTheme }));
+}
+const RlsAppThemeTabs = 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 }) }))] })] }));
@@ -1757,33 +1883,6 @@ function RlsFieldFileComponent({ accept, children, disabled: _disabled, formCont
 }
 const RlsFieldFile = memo(RlsFieldFileComponent);
 
-const reactI18n = 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 = useRef(callback);
     useInsertionEffect(() => {
@@ -2694,50 +2793,6 @@ function RlsSliderComponent({ children, className, disabled, formControl, identi
 }
 const RlsSlider = memo(RlsSliderComponent);
 
-function RlsTab({ disabled, onSelect, tab, value }) {
-    const className = renderClassStatus('rls-tabs__children', {
-        active: tab.value === value,
-        disabled: disabled || tab.disabled
-    });
-    const onClick = 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] = useState();
-    const valueSelected = useMemo(() => {
-        return formControl ? formControl.value : valueInternal;
-    }, [formControl?.value, valueInternal]);
-    const onSelect = useCallback((value) => {
-        if (formControl) {
-            formControl?.setValue(value);
-        }
-        else {
-            setValueInternal(value);
-        }
-        onValue?.(value);
-    }, [formControl, onValue]);
-    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 = 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))) }))] }));
 }
@@ -5222,6 +5277,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] = 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 };
+}
+
 const DEFAULT_DESIGN_SYSTEM = 'bordered';
 
 const DESIGN_SYSTEM_PREFIX = 'rls-design-system';
@@ -5355,26 +5428,5 @@ function useTabsController(options) {
     return 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;
-}
-
-export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsChooserAutocomplete, RlsChooserAutocompleteTemplate, RlsChooserList, RlsChooserListTemplate, RlsChooserSelect, RlsChooserSelectTemplate, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsHoverSwap, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, getRemSize$1 as getRemSize, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useEventCallback, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
+export { APP_THEMES, ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsAppThemeTabs, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsChooserAutocomplete, RlsChooserAutocompleteTemplate, RlsChooserList, RlsChooserListTemplate, RlsChooserSelect, RlsChooserSelectTemplate, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsHoverSwap, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, getRemSize$1 as getRemSize, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useAppThemeController, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useEventCallback, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
 //# sourceMappingURL=index.mjs.map