@rolster/react-components 18.26.1 → 18.26.2

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

@@ -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);
@@ -2001,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;

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))) }))] }));
 }
@@ -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;