@rolster/react-components 18.26.0 → 18.26.2

package/dist/cjs/assets/{index-C00JrtzY.css → index-Da99wzhq.css}

@@ -219,19 +219,19 @@
   --pvt-button-content-visibility: hidden;
   --pvt-button-ripple-background: var(--rls-theme-color-700);
   --pvt-ghost-background: none;
-  --pvt-ghost-font-color: var(--rls-theme-color-400);
+  --pvt-ghost-font-color: var(--rls-theme-color-500);
   --pvt-ghost-border: none;
   --pvt-outline-background: var(--rls-app-color-050);
   --pvt-outline-font-color: var(--rls-app-color-500);
   --pvt-outline-border: var(--rls-app-border-1-300);
   --pvt-flat-background: var(--rls-theme-color-050);
-  --pvt-flat-font-color: var(--rls-theme-color-400);
+  --pvt-flat-font-color: var(--rls-theme-color-500);
   --pvt-flat-border: none;
   --pvt-stroked-background: var(--rls-app-color-050);
-  --pvt-stroked-font-color: var(--rls-theme-color-400);
+  --pvt-stroked-font-color: var(--rls-theme-color-500);
   --pvt-stroked-border: var(--rls-theme-border-1-300);
   --pvt-classic-background: var(--rls-theme-color-050);
-  --pvt-classic-font-color: var(--rls-theme-color-400);
+  --pvt-classic-font-color: var(--rls-theme-color-500);
   --pvt-classic-border: var(--rls-theme-border-1-300);
   --pvt-raised-background: var(--rls-theme-color-500);
   --pvt-raised-font-color: var(--rls-theme-color-050);
@@ -310,7 +310,7 @@
   height: var(--rls-sizing-x20);
   padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x4));
   box-sizing: border-box;
-  border-radius: var(--rlc-button-content-radius, var(--rls-sizing-x4));
+  border-radius: var(--rlc-button-content-radius, var(--rls-sizing-x2));
   box-shadow: var(--pvt-button-content-box-shadow);
   color: var(--pvt-button-content-font-color);
   border: var(--pvt-button-content-border);
@@ -754,8 +754,9 @@
   align-items: center;
   padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
   box-sizing: border-box;
-  background: var(--rlc-input-search-background, var(--rls-app-color-100));
+  background: var(--rlc-input-search-background, transparent);
   border-radius: var(--rls-sizing-x4);
+  border: var(--rls-app-border-1-200);
 }
 .rls-input-search--disabled {
   opacity: 0.5;
@@ -2000,6 +2001,46 @@
   transition: left 200ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=Slider.css.map */
 
+.rls-tabs {
+  --pvt-background: var(--rls-app-color-100);
+  --pvt-border: var(--rls-app-border-1-200);
+  --pvt-children-font-color: var(--rls-app-color-700);
+  display: flex;
+  background: var(--pvt-background);
+  padding: var(--rls-sizing-x2);
+  box-sizing: border-box;
+  border-radius: var(--rls-sizing-x4);
+  border: var(--pvt-border);
+}
+.rls-tabs__children {
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  border-radius: var(--rls-sizing-x4);
+  color: var(--rls-app-color-500);
+  font-size: var(--rls-smalltext-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-smalltext-letter-spacing);
+  text-align: center;
+  cursor: pointer;
+  transition: all 240ms var(--rls-standard-curve);
+}
+.rls-tabs__children--active {
+  color: var(--pvt-children-font-color);
+  font-weight: var(--rls-font-weight-semibold);
+  background: var(--rls-app-color-050);
+}
+.rls-tabs__children--disabled {
+  color: var(--rls-app-color-400);
+  font-weight: var(--rls-font-weight-regular);
+  background: rgba(0, 0, 0, 0);
+  cursor: not-allowed;
+}
+.rls-tabs[rls-theme] {
+  --pvt-background: var(--rls-theme-color-050);
+  --pvt-border: var(--rls-theme-border-1-200);
+  --pvt-children-font-color: var(--rls-theme-color-600);
+} /*# sourceMappingURL=Tabs.css.map */
+
 .rls-toolbar {
   display: flex;
   justify-content: space-between;
@@ -2130,7 +2171,7 @@
 .rls-card {
   --rlc-divider-background: var(--rls-app-color-300);
   --pvt-background: var(--rls-app-color-050);
-  --pvt-border: var(--rls-app-border-2-300);
+  --pvt-border: var(--rls-app-border-1-300);
   --pvt-box-shadow: var(--rlc-card-box-shadow, var(--rls-app-shadow-center-4));
   background: var(--pvt-background);
   border-radius: var(--rls-sizing-x4);
@@ -2139,6 +2180,7 @@
 .rls-card[rls-theme] {
   --rlc-divider-background: var(--rls-theme-color-300);
   --pvt-background: var(--rls-theme-color-050);
+  --pvt-border: var(--rls-theme-border-1-300);
 }
 .rls-card--outline {
   border: var(--pvt-border);

package/dist/cjs/index.js

@@ -2436,6 +2436,33 @@ function RlsSlider(props) {
     return (jsxRuntimeExports.jsxs("div", { className: className, children: [props.children && (jsxRuntimeExports.jsx("span", { className: "rls-slider__label", children: props.children })), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [props.prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: props.prefixIcon }), jsxRuntimeExports.jsxs("div", { ref: refComponent, className: "rls-slider__component", children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", onClick: onClickTrack, children: jsxRuntimeExports.jsx("div", { ref: refTrackOn, className: "rls-slider__track__on" }) }), jsxRuntimeExports.jsxs("div", { ref: refThumb, className: "rls-slider__thumb", children: [rate, "%"] })] })] })] }));
 }
 
+function RlsTab({ onSelect, tab, value }) {
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-tabs__children', {
+            active: tab.value === value,
+            disabled: tab.disabled
+        });
+    }, [value, tab.disabled]);
+    const onClick = require$$0.useCallback(() => {
+        !tab.disabled && onSelect(tab.value);
+    }, [tab.disabled]);
+    return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
+}
+function RlsTabs({ tabs, onValue, rlsTheme }) {
+    const [value, setValue] = require$$0.useState();
+    const onSelect = require$$0.useCallback((value) => {
+        setValue(value);
+        onValue && onValue(value);
+    }, [onValue]);
+    require$$0.useEffect(() => {
+        const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
+        initial && onSelect(initial.value);
+    }, []);
+    return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
+            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, value: value, onSelect: onSelect }, index));
+        }) }));
+}
+
 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))) }))] }));
 }
@@ -2450,11 +2477,11 @@ function RlsBottomSheet({ children, className, onAutoClose, visible, rlsTheme })
     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", onClick: onClickBackdrop })] }), document.body);
 }
 
-function RlsCard({ children, outline, rlsTheme }) {
-    const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-card', { outline });
-    }, [outline]);
-    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
+function RlsCard({ children, className, outline, rlsTheme }) {
+    const classNameCard = require$$0.useMemo(() => {
+        return renderClassStatus('rls-card', { outline }, className);
+    }, [outline, className]);
+    return (jsxRuntimeExports.jsx("div", { className: classNameCard, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-card__content", children: children }) }));
 }
 
 const reactI18n = i18n.i18n({
@@ -3945,6 +3972,7 @@ exports.RlsSlider = RlsSlider;
 exports.RlsSnackbar = RlsSnackbar;
 exports.RlsSwitch = RlsSwitch;
 exports.RlsSwitchControl = RlsSwitchControl;
+exports.RlsTabs = RlsTabs;
 exports.RlsTabularText = RlsTabularText;
 exports.RlsToolbar = RlsToolbar;
 exports.calculateImgDimension = calculateImgDimension;