@rolster/react-components 18.24.5 → 18.24.7

package/dist/cjs/assets/{index-Bu13z0o-.css → index-BT0oqTbs.css}

@@ -276,7 +276,7 @@
   --pvt-classic-font-color: var(--rls-app-color-400);
   --pvt-classic-border: none;
   --pvt-raised-background: var(--rls-theme-color-200);
-  --pvt-raised-font-color: var(--rls-theme-color-400);
+  --pvt-raised-font-color: var(--rls-theme-color-050);
   --pvt-raised-border: none;
   --pvt-flat-background: var(--rls-theme-color-100);
   --pvt-flat-font-color: var(--rls-theme-color-300);
@@ -1320,6 +1320,9 @@
   --pvt-text-opacity: 0.5;
   pointer-events: none;
 }
+.rls-label-checkbox--reverse {
+  flex-direction: row-reverse;
+}
 .rls-label-checkbox--extended {
   --pvt-text-text-overflow: initial;
   --pvt-text-overflow: initial;
@@ -1330,12 +1333,11 @@
   width: auto;
 }
 .rls-label-checkbox__text {
-  max-width: calc(100% - var(--rls-sizing-x28));
-  color: var(--rls-app-color-600);
-  line-height: var(--pvt-text-height);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
+  line-height: var(--pvt-text-height);
+  color: var(--rls-app-color-600);
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1360,6 +1362,9 @@
   --pvt-text-opacity: 0.5;
   pointer-events: none;
 }
+.rls-label-radiobutton--reverse {
+  flex-direction: row-reverse;
+}
 .rls-label-radiobutton--extended {
   --pvt-text-text-overflow: initial;
   --pvt-text-overflow: initial;
@@ -1371,12 +1376,11 @@
   width: auto;
 }
 .rls-label-radiobutton__text {
-  max-width: calc(100% - var(--rls-sizing-x28));
-  color: var(--rls-app-color-600);
-  line-height: var(--pvt-text-height);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
+  line-height: var(--pvt-text-height);
+  color: var(--rls-app-color-600);
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1401,6 +1405,9 @@
   --pvt-text-opacity: 0.5;
   pointer-events: none;
 }
+.rls-label-switch--reverse {
+  flex-direction: row-reverse;
+}
 .rls-label-switch--extended {
   --pvt-text-text-overflow: initial;
   --pvt-text-overflow: initial;
@@ -1411,12 +1418,11 @@
   max-width: 20rem;
 }
 .rls-label-switch__text {
-  max-width: calc(100% - var(--rls-sizing-x28));
-  color: var(--rls-app-color-600);
-  line-height: var(--pvt-text-height);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
+  line-height: var(--pvt-text-height);
+  color: var(--rls-app-color-600);
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1930,6 +1936,61 @@
   align-items: center;
 } /*# sourceMappingURL=Toolbar.css.map */
 
+.rls-bottom-sheet {
+  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--rls-z-index-24);
+  visibility: hidden;
+}
+.rls-bottom-sheet--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-bottom-sheet__component {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  max-width: 240rem;
+  max-height: 75%;
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--rls-z-index-2);
+  border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
+  background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
+  transform: var(--pvt-component-transform);
+  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
+    transform 125ms 0ms var(--rls-deceleration-curve),
+    visibility 125ms 0ms var(--rls-deceleration-curve);
+}
+.rls-bottom-sheet__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: 1;
+  background: var(--rls-theme-backdrop-900);
+  backdrop-filter: blur(2px);
+  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
+} /*# sourceMappingURL=BottomSheet.css.map */
+
 .rls-card {
   --rlc-divider-background: var(--rls-app-color-300);
   --pvt-background: var(--rls-app-color-100);
@@ -2189,9 +2250,6 @@
   align-items: center;
   justify-content: center;
 }
-.rls-modal--overflow {
-  --pvt-component-overflow: initial;
-}
 .rls-modal--visible {
   --pvt-component-visibility: visible;
   --pvt-component-height: auto;

package/dist/cjs/index.js

@@ -1919,7 +1919,7 @@ function RlsFieldText(props) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputText, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
-function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, rlsTheme }) {
+function RlsLabelCheckBox({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
     const [checked, setChecked] = require$$0.useState(!!formControl?.value);
     require$$0.useEffect(() => {
         setChecked(!!formControl?.value);
@@ -1930,12 +1930,16 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
             : setChecked((checked) => !checked);
     }, [formControl]);
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-label-checkbox', { disabled, extended });
-    }, [disabled, extended]);
+        return renderClassStatus('rls-label-checkbox', {
+            disabled,
+            extended,
+            reverse
+        });
+    }, [disabled, extended, reverse]);
     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 RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, rlsTheme, value }) {
+function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, onValue, reverse, rlsTheme, value }) {
     const [checked, setChecked] = require$$0.useState(formControl?.value === value);
     require$$0.useEffect(() => {
         setChecked(formControl?.value === value);
@@ -1945,12 +1949,16 @@ function RlsLabelRadioButton({ children, disabled, extended, identifier, formCon
         onValue && onValue(value);
     }, [formControl, value, onValue]);
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-label-radiobutton', { disabled, extended });
-    }, [disabled, extended]);
+        return renderClassStatus('rls-label-radiobutton', {
+            disabled,
+            extended,
+            reverse
+        });
+    }, [disabled, extended, reverse]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__text", children: children })] }));
 }
 
-function RlsLabelSwitch({ children, disabled, extended, identifier, formControl, rlsTheme }) {
+function RlsLabelSwitch({ children, disabled, extended, identifier, formControl, reverse, rlsTheme }) {
     const [checked, setChecked] = require$$0.useState(!!formControl?.value);
     require$$0.useEffect(() => {
         setChecked(!!formControl?.value);
@@ -1961,8 +1969,12 @@ function RlsLabelSwitch({ children, disabled, extended, identifier, formControl,
             : setChecked((checked) => !checked);
     }, [formControl]);
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-label-switch', { disabled, extended });
-    }, [disabled, extended]);
+        return renderClassStatus('rls-label-switch', {
+            disabled,
+            extended,
+            reverse
+        });
+    }, [disabled, extended, reverse]);
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-switch__text", children: children })] }));
 }
 
@@ -2393,6 +2405,13 @@ function RlsToolbar({ 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))) }))] }));
 }
 
+function RlsBottonSheet({ children, className, visible, rlsTheme }) {
+    const classNameSheet = require$$0.useMemo(() => {
+        return renderClassStatus('rls-bottom-sheet', { visible }, className);
+    }, [className, visible]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameSheet, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-bottom-sheet__backdrop" })] }), document.body);
+}
+
 function RlsCard({ children, outline, rlsTheme }) {
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-card', { outline });
@@ -2833,10 +2852,10 @@ function RlsFieldAutocomplete(props) {
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
-function RlsModal({ children, className, overflow, visible, rlsTheme }) {
+function RlsModal({ children, className, visible, rlsTheme }) {
     const classNameModal = require$$0.useMemo(() => {
-        return renderClassStatus('rls-modal', { overflow, visible }, className);
-    }, [className, overflow, visible]);
+        return renderClassStatus('rls-modal', { visible }, className);
+    }, [className, visible]);
     return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
 
@@ -3780,6 +3799,7 @@ exports.RlsApplication = RlsApplication;
 exports.RlsAvatar = RlsAvatar;
 exports.RlsBadge = RlsBadge;
 exports.RlsBallot = RlsBallot;
+exports.RlsBottonSheet = RlsBottonSheet;
 exports.RlsBreadcrumb = RlsBreadcrumb;
 exports.RlsButton = RlsButton;
 exports.RlsButtonAction = RlsButtonAction;