@solostylist/ui-kit 1.0.192 → 1.0.194

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

package/dist/theme/customizations/data-display.js

@@ -1,33 +1,33 @@
 import { i } from "../../iconButtonClasses-BMfIhNTh.js";
-import { b as e } from "../../buttonBaseClasses-jtnoTmPn.js";
-import { t as a } from "../../typographyClasses-jmoWZuXc.js";
+import { b as a } from "../../buttonBaseClasses-jtnoTmPn.js";
+import { t as e } from "../../typographyClasses-jmoWZuXc.js";
 import { s as t } from "../../svgIconClasses-C6auqaBA.js";
 const r = (o) => ({
   alignItems: "center",
   display: "flex",
   gap: 8,
   padding: "0.5rem 1rem",
-  borderRadius: (o.vars || o).shape.borderRadius,
+  borderRadius: 0,
   whiteSpace: "nowrap",
   color: (o.vars || o).palette.text.secondary,
   [`& .${t.root}`]: {
     color: (o.vars || o).palette.text.secondary
   },
   "&.Mui-selected": {
-    backgroundColor: o.palette.action.selected,
+    backgroundColor: (o.vars || o).palette.action.selected,
     color: (o.vars || o).palette.text.primary,
     [`& .${t.root}`]: {
       color: (o.vars || o).palette.text.primary
     },
     "&:focus-visible": {
-      backgroundColor: o.palette.action.selected
+      backgroundColor: (o.vars || o).palette.action.selected
     },
     "&:hover": {
-      backgroundColor: o.palette.action.selected
+      backgroundColor: (o.vars || o).palette.action.selected
     }
   },
   "&:hover:not(.Mui-selected)": {
-    backgroundColor: o.palette.action.hover,
+    backgroundColor: (o.vars || o).palette.action.hover,
     color: (o.vars || o).palette.text.primary,
     [`& .${t.root}`]: {
       color: (o.vars || o).palette.text.primary
@@ -60,10 +60,10 @@ const r = (o) => ({
         [`& .${t.root}`]: {
           color: (o.vars || o).palette.text.secondary
         },
-        [`& .${a.root}`]: {
+        [`& .${e.root}`]: {
           fontWeight: 500
         },
-        [`& .${e.root}`]: r(o)
+        [`& .${a.root}`]: r(o)
       })
     }
   },

package/dist/theme/customizations/navigation.js

@@ -1,10 +1,10 @@
-import { j as a } from "../../jsx-runtime-tc70JA_2.js";
+import { j as e } from "../../jsx-runtime-tc70JA_2.js";
 import * as i from "react";
-import { c as s } from "../../createSvgIcon-DTNHY3_v.js";
-import { gray as o, brand as l } from "../theme-primitives.js";
+import { c as l } from "../../createSvgIcon-DTNHY3_v.js";
+import { gray as a, brand as s } from "../theme-primitives.js";
 import { t } from "../../tabClasses-DFvXsFrN.js";
 import { a as d } from "../../createTheme-CIXJrNxb.js";
-const n = s(/* @__PURE__ */ a.jsx("path", {
+const n = l(/* @__PURE__ */ e.jsx("path", {
   d: "m12 5.83 2.46 2.46c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L12.7 3.7a.996.996 0 0 0-1.41 0L8.12 6.88c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0zm0 12.34-2.46-2.46a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l3.17 3.18c.39.39 1.02.39 1.41 0l3.17-3.17c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
 }), "UnfoldMoreRounded"), y = {
   MuiAppBar: {
@@ -49,7 +49,7 @@ const n = s(/* @__PURE__ */ a.jsx("path", {
   },
   MuiSelect: {
     defaultProps: {
-      IconComponent: i.forwardRef((r, e) => /* @__PURE__ */ a.jsx(n, { fontSize: "small", ...r, ref: e }))
+      IconComponent: i.forwardRef((r, o) => /* @__PURE__ */ e.jsx(n, { fontSize: "small", ...r, ref: o }))
     }
   },
   MuiLink: {
@@ -78,7 +78,7 @@ const n = s(/* @__PURE__ */ a.jsx("path", {
           width: 0
         },
         "&:focus-visible": {
-          outline: `3px solid ${d(l[500], 0.5)}`,
+          outline: `3px solid ${d(s[500], 0.5)}`,
           outlineOffset: "4px",
           borderRadius: "2px"
         }
@@ -109,12 +109,16 @@ const n = s(/* @__PURE__ */ a.jsx("path", {
   },
   MuiTabs: {
     styleOverrides: {
-      root: ({ theme: r }) => ({
-        width: "100%",
+      root: ({ theme: r, ownerState: o }) => ({
         minHeight: "fit-content",
         border: 0,
-        borderBottom: "1px solid",
-        borderColor: (r.vars || r).palette.divider
+        ...o.orientation === "vertical" ? {
+          borderRight: "1px solid",
+          borderColor: (r.vars || r).palette.divider
+        } : {
+          borderBottom: "1px solid",
+          borderColor: (r.vars || r).palette.divider
+        }
       }),
       indicator: ({ theme: r }) => ({
         backgroundColor: (r.vars || r).palette.grey[800],
@@ -128,6 +132,9 @@ const n = s(/* @__PURE__ */ a.jsx("path", {
     styleOverrides: {
       root: ({ theme: r }) => ({
         textTransform: "none",
+        ".MuiTabs-vertical &": {
+          alignItems: "flex-start"
+        },
         minWidth: "fit-content",
         minHeight: "fit-content",
         color: (r.vars || r).palette.text.secondary,
@@ -165,7 +172,7 @@ const n = s(/* @__PURE__ */ a.jsx("path", {
     styleOverrides: {
       root: ({ theme: r }) => ({
         color: "transparent",
-        border: `1px solid ${o[400]}`,
+        border: `1px solid ${a[400]}`,
         width: 12,
         height: 12,
         borderRadius: "50%",
@@ -181,7 +188,7 @@ const n = s(/* @__PURE__ */ a.jsx("path", {
           color: (r.vars || r).palette.success.main
         },
         ...r.applyStyles("dark", {
-          border: `1px solid ${o[700]}`,
+          border: `1px solid ${a[700]}`,
           "&.Mui-active": {
             border: "none",
             color: (r.vars || r).palette.primary.light

package/package.json

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