@rolster/react-components 18.26.11 → 18.26.12

package/dist/cjs/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/cjs/index.js

@@ -1439,6 +1439,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] = require$$0.useState(formControl?.value === value);
+    require$$0.useEffect(() => {
+        setChecked(formControl?.value === value);
+    }, [formControl?.value]);
+    const onSelect = require$$0.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 = require$$0.useMemo(() => {
+        return renderClassStatus('rls-button-option', { checked });
+    }, [checked]);
+    const onAction = require$$0.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 = require$$0.useMemo(() => {
         return renderClassStatus('rls-checkbox', { checked, disabled });
@@ -1985,20 +2016,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] = require$$0.useState(formControl?.value === value);
-    require$$0.useEffect(() => {
-        setChecked(formControl?.value === value);
-    }, [formControl?.value]);
-    const onSelect = require$$0.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,
@@ -3914,6 +3931,7 @@ exports.RlsBottomSheet = RlsBottomSheet;
 exports.RlsBreadcrumb = RlsBreadcrumb;
 exports.RlsButton = RlsButton;
 exports.RlsButtonAction = RlsButtonAction;
+exports.RlsButtonOption = RlsButtonOption;
 exports.RlsButtonProgress = RlsButtonProgress;
 exports.RlsButtonToggle = RlsButtonToggle;
 exports.RlsCard = RlsCard;