@solostylist/ui-kit 1.0.193 → 1.0.195

package/dist/s-tabs/s-tab-panel.d.ts

@@ -6,10 +6,10 @@ import { BoxProps } from '@mui/material';
 export interface STabPanelProps extends BoxProps {
     /** Content to display in the tab panel */
     children?: React.ReactNode;
-    /** Index of this specific tab panel (0-based) */
-    index: number;
-    /** Current active tab index from the parent tabs component */
-    value: number;
+    /** Index (or value) of this specific tab panel */
+    index: number | string;
+    /** Current active tab index (or value) from the parent tabs component */
+    value: number | string;
     /** Keep the panel mounted in the DOM when not active */
     keepMounted?: boolean;
 }

package/dist/s-tabs/s-tabs.d.ts

@@ -7,9 +7,9 @@ export interface STabsProps extends Omit<TabsProps, 'children'> {
     /** Array of tab configuration objects defining the tabs to display */
     tabs: STabItem[];
     /** Index of the currently active tab. Set to false for uncontrolled mode */
-    activeTab?: number | false;
+    activeTab?: number | string | false;
     /** Callback function called when a tab is selected */
-    onTabChange?: (event: React.SyntheticEvent, value: number) => void;
+    onTabChange?: (event: React.SyntheticEvent, value: number | string) => void;
     /** Tab panel content. Children are matched to tabs by index */
     children?: React.ReactNode;
     /** Additional props passed to the tab panel wrapper Box component */
@@ -22,7 +22,7 @@ export interface STabItem {
     /** The content displayed in the tab */
     label: React.ReactNode;
     /** Custom value for the tab. If not provided, uses the tab index */
-    value?: number;
+    value?: number | string;
     /** Whether the tab is disabled and cannot be selected */
     disabled?: boolean;
     /** Icon element to display in the tab */

package/dist/s-tabs/s-tabs.js

@@ -1,16 +1,16 @@
 import { j as o } from "../jsx-runtime-tc70JA_2.js";
-import r, { forwardRef as j } from "react";
-import { Tabs as g, Tab as y, Box as f } from "@mui/material";
+import l, { forwardRef as j } from "react";
+import { Tabs as g, Tab as y, Box as p } from "@mui/material";
 const C = j(
-  ({ tabs: p, activeTab: s = 0, onTabChange: c, children: l, tabPanelProps: m, ...a }, u) => {
-    const [i, t] = r.useState(s);
-    r.useEffect(() => {
-      s !== !1 && t(s);
+  ({ tabs: r, activeTab: s = 0, onTabChange: c, children: i, tabPanelProps: u, ...a }, m) => {
+    const [t, d] = l.useState(s);
+    l.useEffect(() => {
+      s !== !1 && d(s);
     }, [s]);
     const x = (e, n) => {
-      s === !1 && t(n), c?.(e, n);
-    }, h = a.orientation === "vertical", d = /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-      /* @__PURE__ */ o.jsx(g, { ref: u, value: i, onChange: x, ...a, children: p.map((e, n) => /* @__PURE__ */ o.jsx(
+      s === !1 && d(n), c?.(e, n);
+    }, h = a.orientation === "vertical", f = /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+      /* @__PURE__ */ o.jsx(g, { ref: m, value: t, onChange: x, ...a, children: r.map((e, n) => /* @__PURE__ */ o.jsx(
         y,
         {
           label: e.label,
@@ -23,9 +23,9 @@ const C = j(
         },
         n
       )) }),
-      l && /* @__PURE__ */ o.jsx(f, { role: "tabpanel", padding: 2, ...m, children: r.Children.toArray(l)[i] })
+      i && /* @__PURE__ */ o.jsx(p, { role: "tabpanel", padding: 2, ...u, children: l.Children.toArray(i)[r.findIndex((e, n) => (e.value ?? n) === t)] })
     ] });
-    return h ? /* @__PURE__ */ o.jsx(f, { display: "flex", children: d }) : d;
+    return h ? /* @__PURE__ */ o.jsx(p, { display: "flex", children: f }) : f;
   }
 );
 C.displayName = "STabs";

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.193",
+  "version": "1.0.195",
   "description": "advanced ui kit for solostylist",
   "type": "module",
   "main": "dist/main.js",