@solostylist/ui-kit 1.0.46 → 1.0.48

package/dist/s-theme-provider/s-theme-provider.js

@@ -1,10 +1,10 @@
 import { j as e } from "../jsx-runtime-C5mzlN2N.js";
-import * as m from "react";
+import * as s from "react";
 import { createTheme as p, ThemeProvider as c } from "@mui/material";
 import { components as f } from "../theme/components/components.js";
 import { dataDisplayCustomizations as u } from "../theme/customizations/data-display.js";
-import { feedbackCustomizations as d } from "../theme/customizations/feedback.js";
-import { inputsCustomizations as h } from "../theme/customizations/inputs.js";
+import { feedbackCustomizations as h } from "../theme/customizations/feedback.js";
+import { inputsCustomizations as d } from "../theme/customizations/inputs.js";
 import { navigationCustomizations as l } from "../theme/customizations/navigation.js";
 import { surfacesCustomizations as x } from "../theme/customizations/surfaces.js";
 import { shape as z, shadows as g, typography as j, colorSchemes as S } from "../theme/theme-primitives.js";
@@ -12,41 +12,38 @@ const w = ({
   children: r,
   disableCustomTheme: o,
   themeComponents: t,
-  defaultMode: s = "dark",
-  theme: a,
-  ...i
+  defaultMode: m = "dark",
+  theme: i,
+  ...a
 }) => {
-  const n = m.useMemo(() => o ? {} : p({
+  const n = s.useMemo(() => o ? {} : p({
     // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
     cssVariables: {
       colorSchemeSelector: "data-mui-color-scheme",
       cssVarPrefix: "s"
     },
-    palette: {
-      mode: "dark"
-    },
     colorSchemes: S,
     // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
     typography: j,
     shadows: g,
     shape: z,
     components: {
-      ...h,
-      ...u,
       ...d,
+      ...u,
+      ...h,
       ...l,
       ...x,
       ...f,
       ...t
     }
   }), [o, t]);
-  return o ? /* @__PURE__ */ e.jsx(m.Fragment, { children: r }) : /* @__PURE__ */ e.jsx(
+  return o ? /* @__PURE__ */ e.jsx(s.Fragment, { children: r }) : /* @__PURE__ */ e.jsx(
     c,
     {
       disableTransitionOnChange: !0,
-      ...i,
-      theme: { ...n, ...a },
-      defaultMode: s,
+      ...a,
+      theme: { ...n, ...i },
+      defaultMode: m,
       children: r
     }
   );

package/dist/theme/customizations/data-display.d.ts

@@ -1,2 +1,7 @@
 import { Components, Theme } from '@mui/material/styles';
+declare module '@mui/material/Chip' {
+    interface ChipPropsColorOverrides {
+        premium: true;
+    }
+}
 export declare const dataDisplayCustomizations: Components<Theme>;

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

@@ -1,13 +1,13 @@
 import { j as n } from "../../jsx-runtime-C5mzlN2N.js";
 import { IconCircleX as s } from "@tabler/icons-react";
-import { gray as e, green as l, red as a } from "../theme-primitives.js";
+import { gray as l, green as e, red as a } from "../theme-primitives.js";
 import { i as c } from "../../iconButtonClasses-CpCspPuI.js";
 import { g as d } from "../../generateUtilityClasses-CvAVhM6T.js";
 import { s as i } from "../../svgIconClasses-SRBiyaM8.js";
 import { b as p } from "../../buttonBaseClasses-CTVeu_V8.js";
 import { t as y } from "../../typographyClasses-DVLfmcGt.js";
 import { a as t } from "../../createTheme-CyFSna1a.js";
-const r = d("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]), z = {
+const r = d("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]), $ = {
   MuiList: {
     styleOverrides: {
       root: {
@@ -104,22 +104,22 @@ const r = d("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colo
               color: "default"
             },
             style: {
-              borderColor: e[200],
-              backgroundColor: e[100],
+              borderColor: l[200],
+              backgroundColor: l[100],
               [`& .${r.label}`]: {
-                color: e[500]
+                color: l[500]
               },
               [`& .${r.icon}`]: {
-                color: e[500]
+                color: l[500]
               },
               ...o.applyStyles("dark", {
-                borderColor: e[700],
-                backgroundColor: e[800],
+                borderColor: l[700],
+                backgroundColor: l[800],
                 [`& .${r.label}`]: {
-                  color: e[300]
+                  color: l[300]
                 },
                 [`& .${r.icon}`]: {
-                  color: e[300]
+                  color: l[300]
                 }
               })
             }
@@ -129,22 +129,22 @@ const r = d("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colo
               color: "success"
             },
             style: {
-              borderColor: l[200],
-              backgroundColor: l[50],
+              borderColor: e[200],
+              backgroundColor: e[50],
               [`& .${r.label}`]: {
-                color: l[500]
+                color: e[500]
               },
               [`& .${r.icon}`]: {
-                color: l[500]
+                color: e[500]
               },
               ...o.applyStyles("dark", {
-                borderColor: l[800],
-                backgroundColor: l[900],
+                borderColor: e[800],
+                backgroundColor: e[900],
                 [`& .${r.label}`]: {
-                  color: l[300]
+                  color: e[300]
                 },
                 [`& .${r.icon}`]: {
-                  color: l[300]
+                  color: e[300]
                 }
               })
             }
@@ -193,11 +193,27 @@ const r = d("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colo
                 fontSize: o.typography.caption.fontSize
               }
             }
+          },
+          {
+            props: { color: "premium" },
+            style: {
+              background: "linear-gradient(90deg, #18181b 0%, #27272a 100%)",
+              color: "#fff",
+              border: "1px solid #64748b",
+              boxShadow: "0 4px 16px 0 rgba(100,116,139,0.18)",
+              [`& .${r.label}`]: {
+                color: "#fff",
+                fontWeight: 600
+              },
+              [`& .${r.icon}`]: {
+                color: "#fff"
+              }
+            }
           }
         ]
       }),
       labelSmall: { paddingInline: 12 },
-      colorSecondary: { color: e[500], backgroundColor: e[100] }
+      colorSecondary: { color: l[500], backgroundColor: l[100] }
     }
   },
   MuiTablePagination: {
@@ -235,5 +251,5 @@ const r = d("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colo
   }
 };
 export {
-  z as dataDisplayCustomizations
+  $ as dataDisplayCustomizations
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.46",
+  "version": "1.0.48",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",