@rolster/react-components 18.26.8 → 18.26.10

package/dist/es/assets/{index-Dlyq90g-.css → index-CwYV1zJh.css}

@@ -214,6 +214,89 @@
   font-size: inherit;
 } /*# sourceMappingURL=Icon.css.map */
 
+.rls-spinner {
+  position: relative;
+  display: block;
+  width: var(--rlc-spinner-dimension, var(--rls-sizing-x12));
+  height: var(--rlc-spinner-dimension, var(--rls-sizing-x12));
+  fill: var(--rlc-spinner-color, var(--rls-app-color-800));
+}
+.rls-spinner__svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  fill: inherit;
+  transform-origin: center center;
+  transform: translateZ(0px);
+  animation: 1s linear 0s infinite normal none running rls-spinner-scale-out;
+}
+.rls-spinner__svg > circle {
+  r: 5;
+  transform: translate(32px, 32px);
+}
+.rls-spinner__svg--1 {
+  top: 0px;
+  left: 9px;
+  animation-delay: -1000ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--2 {
+  top: 5.78509px;
+  left: 6.8944px;
+  animation-delay: -888.889ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--3 {
+  top: 8.86327px;
+  left: 1.56283px;
+  animation-delay: -777.778ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--4 {
+  top: 7.79423px;
+  left: -4.5px;
+  animation-delay: -666.667ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--5 {
+  top: 3.07818px;
+  left: -8.45723px;
+  animation-delay: -555.556ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--6 {
+  top: -3.07818px;
+  left: -8.45723px;
+  animation-delay: -444.444ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--7 {
+  top: -7.79423px;
+  left: -4.5px;
+  animation-delay: -333.333ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--8 {
+  top: -8.86327px;
+  left: 1.56283px;
+  animation-delay: -222.222ms;
+  animation-duration: 1000ms;
+}
+.rls-spinner__svg--9 {
+  top: -5.78509px;
+  left: 6.8944px;
+  animation-delay: -111.111ms;
+  animation-duration: 1000ms;
+}
+@keyframes rls-spinner-scale-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(0, 0);
+  }
+} /*# sourceMappingURL=Spinner.css.map */
+
 .rls-button {
   --pvt-button-content-background: none;
   --pvt-button-content-border: none;
@@ -339,41 +422,48 @@
   visibility: var(--pvt-button-content-visibility);
 }
 .rls-button__content--ghost {
+  --rlc-spinner-color: var(--pvt-ghost-font-color);
   --pvt-button-content-font-color: var(--pvt-ghost-font-color);
   --pvt-button-content-background: var(--pvt-ghost-background);
   --pvt-button-content-border: var(--pvt-ghost-border);
 }
 .rls-button__content--outline {
+  --rlc-spinner-color: var(--pvt-outline-font-color);
   --pvt-button-content-font-color: var(--pvt-outline-font-color);
   --pvt-button-content-background: var(--pvt-outline-background);
   --pvt-button-content-border: var(--pvt-outline-border);
 }
 .rls-button__content--stroked {
+  --rlc-spinner-color: var(--pvt-stroked-font-color);
   --pvt-button-content-font-color: var(--pvt-stroked-font-color);
   --pvt-button-content-background: var(--pvt-stroked-background);
   --pvt-button-content-border: var(--pvt-stroked-border);
 }
 .rls-button__content--classic {
-  --pvt-button-content-background: var(--pvt-classic-background);
+  --rlc-spinner-color: var(--pvt-classic-font-color);
   --pvt-button-content-font-color: var(--pvt-classic-font-color);
+  --pvt-button-content-background: var(--pvt-classic-background);
   --pvt-button-content-border: var(--pvt-classic-border);
   --pvt-button-ripple-background: var(--rls-theme-font-100);
 }
 .rls-button__content--flat {
+  --rlc-spinner-color: var(--pvt-flat-font-color);
   --pvt-button-content-font-color: var(--pvt-flat-font-color);
   --pvt-button-content-background: var(--pvt-flat-background);
   --pvt-button-content-border: var(--pvt-flat-border);
   --pvt-button-ripple-background: var(--rls-theme-font-100);
 }
 .rls-button__content--raised {
-  --pvt-button-content-background: var(--pvt-raised-background);
+  --rlc-spinner-color: var(--pvt-raised-font-color);
   --pvt-button-content-font-color: var(--pvt-raised-font-color);
+  --pvt-button-content-background: var(--pvt-raised-background);
   --pvt-button-content-border: var(--pvt-raised-border);
   --pvt-button-ripple-background: var(--rls-theme-font-900);
 }
 .rls-button__content--gradient {
-  --pvt-button-content-background: var(--pvt-gradient-background);
+  --rlc-spinner-color: var(--pvt-gradiunt-font-color);
   --pvt-button-content-font-color: var(--pvt-gradient-font-color);
+  --pvt-button-content-background: var(--pvt-gradient-background);
   --pvt-button-content-border: var(--pvt-gradient-border);
   --pvt-button-ripple-background: var(--rls-theme-font-900);
 }
@@ -1271,7 +1361,7 @@
   border: var(--rls-theme-border-1-500);
   transform: var(--rlc-button-toggle-ul-transform);
   transform-origin: 0% 0%;
-  box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
+  box-shadow: var(--rls-theme-shadow-500);
   transition: transform 240ms 0ms var(--rls-standard-curve),
     opacity 240ms 0ms var(--rls-standard-curve);
 }
@@ -1627,7 +1717,7 @@
   --pvt-span-background: transparent;
   --pvt-span-font-color: var(--rls-theme-color-500);
   --pvt-span-border: none;
-  --pvt-span-box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
+  --pvt-span-box-shadow: var(--rls-theme-shadow-500);
 }
 .rls-picker-day__element--selected {
   --pvt-span-background: var(--rls-theme-color-200);
@@ -2180,21 +2270,20 @@
 .rls-card {
   --rlc-divider-background: var(--rls-app-color-300);
   --pvt-background: var(--rls-app-color-050);
-  --pvt-border: var(--rls-app-border-1-300);
-  --pvt-box-shadow: var(--rlc-card-box-shadow, var(--rls-app-shadow-center-4));
+  --pvt-border: var(--rlc-card-border, var(--rls-app-border-1-300));
+  --pvt-box-shadow: var(--rlc-card-box-shadow, var(--rls-app-shadow-center-6));
   background: var(--pvt-background);
   border-radius: var(--rls-sizing-x4);
   box-shadow: var(--pvt-box-shadow);
 }
 .rls-card[rls-theme] {
-  --rlc-divider-background: var(--rls-theme-color-300);
+  --rlc-divider-background: var(--rls-theme-color-200);
   --pvt-background: var(--rls-theme-color-050);
-  --pvt-border: var(--rls-theme-border-1-300);
+  --pvt-border: var(--rlc-card-border, var(--rls-theme-border-1-200));
 }
 .rls-card--outline {
   border: var(--pvt-border);
   box-sizing: border-box;
-  box-shadow: none;
 }
 .rls-card__content {
   display: flex;
@@ -3063,10 +3152,12 @@
   max-width: 240rem;
   padding: var(--rls-sizing-x6);
   box-sizing: border-box;
-  border-radius: var(--rls-sizing-x4);
-  background: var(--rls-theme-color-100);
+  border-radius: var(--rls-sizing-x6);
+  background: var(--rls-theme-color-050);
+  border: var(--rls-theme-border-1-400);
   transform: translate(-50%, 100%);
-  transition: transform 160ms 0ms var(--rls-standard-curve);
+  transition: all 160ms 0ms var(--rls-standard-curve);
+  box-shadow: var(--rls-theme-shadow-500);
 }
 .rls-snackbar--visible {
   transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));

package/dist/es/index.js

@@ -1422,11 +1422,15 @@ function RlsIcon({ value, skeleton }) {
     return (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
 }
 
-function RlsButton({ type, children, disabled, identifier, prefixIcon, suffixIcon, rlsTheme, onClick }) {
+function RlsSpinner() {
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-spinner", children: [jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--1", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--2", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--3", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--4", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--5", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--6", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--7", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--8", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) }), jsxRuntimeExports.jsx("svg", { className: "rls-spinner__svg rls-spinner__svg--9", viewBox: "0 0 64 64", children: jsxRuntimeExports.jsx("circle", {}) })] }));
+}
+
+function RlsButton({ type, children, disabled, identifier, onClick, prefixIcon, requesting, rlsTheme, suffixIcon }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-button__content', { type });
     }, [type]);
-    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: className, children: [prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__description", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
+    return (jsxRuntimeExports.jsx("button", { id: identifier, className: "rls-button", onClick: onClick, "rls-theme": rlsTheme, disabled: disabled, children: jsxRuntimeExports.jsxs("div", { className: className, children: [requesting && jsxRuntimeExports.jsx(RlsSpinner, {}), prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: prefixIcon }), children && jsxRuntimeExports.jsx("div", { className: "rls-button__description", children: children }), suffixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: suffixIcon })] }) }));
 }
 
 function RlsButtonAction({ icon, disabled, identifier, onClick, tooltip }) {
@@ -3897,5 +3901,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, 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, 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