@rolster/react-components 18.26.11 → 18.26.12

package/dist/es/assets/{index-BumJLNfG.css → index-C8NwFlLS.css}

@@ -517,8 +517,9 @@
   box-sizing: border-box;
   user-select: none;
   cursor: default;
-  background: rgba(0, 0, 0, 0);
+  border-radius: var(--rlc-action-radius, 50%);
   color: var(--rlc-action-color, var(--rls-app-color-600));
+  background: var(--rlc-action-background, transparent);
 }
 .rls-button-action::before {
   position: absolute;
@@ -598,6 +599,43 @@
   }
 } /*# sourceMappingURL=ButtonAction.css.map */
 
+.rls-button-option {
+  --pvt-span-color: var(--rls-app-color-800);
+  --pvt-background-hover: var(--rls-theme-color-100);
+  --rlc-icon-color: var(--rls-app-color-600);
+  display: flex;
+  width: var(--rlc-button-option, auto);
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x3);
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x3);
+  box-sizing: border-box;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  border: var(--rls-app-border-1-300);
+  border-radius: var(--rls-sizing-x4);
+  overflow: hidden;
+}
+.rls-button-option:not(:disabled):hover {
+  background: var(--pvt-background-hover);
+}
+.rls-button-option:disabled {
+  opacity: 0.5;
+}
+.rls-button-option--checked {
+  --pvt-background-hover: var(--rls-theme-color-800);
+  --pvt-span-color: var(--rls-theme-color-050);
+  --rlc-icon-color: var(--rls-theme-color-050);
+  background: var(--rls-theme-gradient-500);
+  border: var(--rls-theme-border-1-500);
+}
+.rls-button-option > span {
+  font-size: var(--rls-span-font-size);
+  letter-spacing: var(--rls-span-letter-spacing);
+  color: var(--pvt-span-color);
+  font-weight: var(--rls-font-weight-medium);
+} /*# sourceMappingURL=ButtonOption.css.map */
+
 .rls-checkbox {
   --rlc-icon-dimension: var(--rls-sizing-x10);
   --rlc-icon-color: transparent;

package/dist/es/index.js

@@ -1,4 +1,4 @@
-import require$$0, { useMemo, useCallback, useState, useRef, useEffect, createContext } from 'react';
+import require$$0, { useMemo, useState, useEffect, useCallback, useRef, createContext } from 'react';
 import { currencyFormat, BigDecimal, valueIsDefined, SealedPartial } from '@rolster/commons';
 import { i18n, i18nSubscribe } from '@rolster/i18n';
 import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, locationListCanTop, navigationListFromInput, navigationListFromElement, createAutocompleteStore, dateOutRange, verifyDateRange, PickerListenerEvent } from '@rolster/components';
@@ -1437,6 +1437,37 @@ function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
     return (jsxRuntimeExports.jsxs("button", { id: identifier, className: "rls-button-action", onClick: onClick, disabled: disabled, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
 }
 
+function useFormSingleSelectionController({ disabled, formControl, onValue, value }) {
+    const [checked, setChecked] = useState(formControl?.value === value);
+    useEffect(() => {
+        setChecked(formControl?.value === value);
+    }, [formControl?.value]);
+    const onSelect = useCallback(() => {
+        if (!disabled) {
+            formControl && formControl.setValue(value);
+            onValue && onValue(value);
+        }
+    }, [formControl, value, onValue, disabled]);
+    return { checked, onSelect };
+}
+
+function RlsButtonOption({ icon, children, disabled, formControl, identifier, onClick, onValue, value }) {
+    const { checked, onSelect } = useFormSingleSelectionController({
+        disabled,
+        formControl,
+        onValue,
+        value
+    });
+    const className = useMemo(() => {
+        return renderClassStatus('rls-button-option', { checked });
+    }, [checked]);
+    const onAction = useCallback(() => {
+        onSelect();
+        onClick && onClick();
+    }, [onSelect, onClick]);
+    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onAction, disabled: disabled, children: [jsxRuntimeExports.jsx(RlsIcon, { value: icon }), children] }));
+}
+
 function RlsCheckBox({ checked, disabled, identifier, onClick, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-checkbox', { checked, disabled });
@@ -1983,20 +2014,6 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__text", children: children })] }));
 }
 
-function useFormSingleSelectionController({ disabled, formControl, onValue, value }) {
-    const [checked, setChecked] = useState(formControl?.value === value);
-    useEffect(() => {
-        setChecked(formControl?.value === value);
-    }, [formControl?.value]);
-    const onSelect = useCallback(() => {
-        if (!disabled) {
-            formControl && formControl.setValue(value);
-            onValue && onValue(value);
-        }
-    }, [formControl, value, onValue, disabled]);
-    return { checked, onSelect };
-}
-
 function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, reverse, rlsTheme, value }) {
     const { checked, onSelect } = useFormSingleSelectionController({
         disabled,
@@ -3901,5 +3918,5 @@ function useDatatable() {
     return { scrolleable, tableRef };
 }
 
-export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useRelocationOnComponent, useResize, useSnackbar };
+export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonOption, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalSheet, RlsNavbar, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useRelocationOnComponent, useResize, useSnackbar };
 //# sourceMappingURL=index.js.map