@spesia/ui 1.9.7 → 1.9.27

package/dist/components/container-grid/ContainerGrid.js

@@ -23,7 +23,7 @@ const I = N(null), y = ({
     Promise.resolve().then(() => {
       var l, u, f, S, v, g, p, h, z;
       o && (o >= Number.parseInt(
-        ((e == null ? void 0 : e.lg) ?? ((f = (u = (l = x) == null ? void 0 : l.breakpoints) == null ? void 0 : u.values) == null ? void 0 : f.lg) ?? 1200).toString()
+        ((e == null ? void 0 : e.lg) ?? ((f = (u = (l = x) == null ? void 0 : l.breakpoints) == null ? void 0 : u.values) == null ? void 0 : f.lg) ?? 1304).toString()
       ) ? n("lg") : o >= Number.parseInt(
         ((e == null ? void 0 : e.md) ?? ((g = (v = (S = x) == null ? void 0 : S.breakpoints) == null ? void 0 : v.values) == null ? void 0 : g.md) ?? 900).toString()
       ) ? n("md") : o >= Number.parseInt(

package/dist/styles/colors.js

@@ -213,12 +213,12 @@ const r = {
   content: {
     text: {
       primary: {
-        light: r.primary.brown[70],
+        light: r.primary.brown[80],
         dark: r.primary.coral[20]
       },
       secondary: {
-        light: r.primary.brown[60],
-        dark: r.primary.brown[30]
+        light: r.primary.brown[50],
+        dark: r.primary.brown[50]
       },
       tertiary: {
         light: r.primary.coral[100],

package/dist/styles/index.js

@@ -3,9 +3,9 @@ import { buttonStyles as r } from "./button/button.js";
 import { chipStyles as e } from "./chip/chip.js";
 import { cardStyles as m } from "./card/card.js";
 import { alertStyles as l } from "./alert/alert.js";
-import { tooltipStyles as i } from "./tooltip/tooltip.js";
-import { formStyles as p } from "./form/form.js";
-import { listStyles as s } from "./list/list.js";
+import { tooltipStyles as s } from "./tooltip/tooltip.js";
+import { formStyles as i } from "./form/form.js";
+import { listStyles as p } from "./list/list.js";
 import { sliderStyles as a } from "./slider/slider.js";
 import { inputStyles as y } from "./input/input.js";
 import { dialogStyles as S } from "./dialog/dialog.js";
@@ -24,9 +24,9 @@ const G = o({
     ...e,
     ...m,
     ...l,
-    ...p,
     ...i,
     ...s,
+    ...p,
     ...y,
     ...S,
     ...a,
@@ -37,6 +37,15 @@ const G = o({
     ...c,
     ...h
   },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1304,
+      xl: 1780
+    }
+  },
   colorSchemes: {
     light: {
       palette: t("light")

package/dist/styles/tab/tab.js

@@ -1,47 +1,81 @@
-import { colors as o } from "../colors.js";
-const i = {
+import { colors as a } from "../colors.js";
+const e = {
   MuiTab: {
     styleOverrides: {
-      root: ({ theme: t }) => ({
-        color: t.vars.palette.text.primary,
-        borderRadius: 0,
-        padding: "0 12px 0 0px",
-        marginRight: t.spacing(6),
-        textTransform: "initial",
-        display: "flex",
-        alignItems: "center",
-        flexDirection: "row",
-        gap: 20,
-        justifyContent: "flex-start",
-        opacity: 0.2,
-        "&.Mui-selected": {
+      root: ({ theme: t }) => {
+        var o, r;
+        return {
           color: t.vars.palette.text.primary,
-          opacity: 1
-        },
-        ".MuiTabs-numbered &": {
-          "&::before": {
-            fontFamily: t.typography.mono.fontFamily,
-            content: 'counter(MuiTab-root, decimal-leading-zero) "."',
-            counterIncrement: "MuiTab-root",
-            fontSize: t.typography.caption.fontSize,
+          borderRadius: 0,
+          padding: "0 12px 0 0px",
+          marginRight: t.spacing(6),
+          textTransform: "initial",
+          display: "flex",
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 20,
+          justifyContent: "flex-start",
+          opacity: 0.2,
+          "&.Mui-selected": {
             color: t.vars.palette.text.primary,
-            padding: t.spacing(0.5, 1),
+            opacity: 1
+          },
+          ".MuiTabs-numbered &": {
+            "&::before": {
+              fontFamily: t.typography.mono.fontFamily,
+              content: 'counter(MuiTab-root, decimal-leading-zero) "."',
+              counterIncrement: "MuiTab-root",
+              fontSize: t.typography.caption.fontSize,
+              color: t.vars.palette.text.primary,
+              padding: t.spacing(0.5, 1),
+              display: "flex",
+              alignItems: "center"
+            }
+          },
+          ".MuiTabs-buttons &": {
+            color: t.vars.palette.text.secondary,
+            padding: { xs: 6, sm: 28 },
+            fontSize: 40,
             display: "flex",
-            alignItems: "center"
+            alignItems: "center",
+            justifyContent: "center",
+            position: "relative",
+            zIndex: 1,
+            margin: 8,
+            borderRadius: t.spacing(2),
+            opacity: 1,
+            "&.Mui-selected": {
+              background: (o = t.vars) == null ? void 0 : o.palette.background.brownBold,
+              color: (r = t.vars) == null ? void 0 : r.palette.text.contrastText
+            }
           }
-        }
-      })
+        };
+      }
     }
   }
-}, a = {
+}, n = {
   MuiTabs: {
     styleOverrides: {
       root: () => ({}),
-      list: () => ({
-        counterReset: "MuiTab-root"
-      }),
+      list: ({ theme: t }) => {
+        var o, r;
+        return {
+          counterReset: "MuiTab-root",
+          ".MuiTabs-buttons &": {
+            backgroundColor: (o = t.vars) == null ? void 0 : o.palette.background.paper,
+            borderRadius: t.spacing(2),
+            border: "1px solid",
+            borderColor: (r = t == null ? void 0 : t.vars) == null ? void 0 : r.palette.border.primary,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            gap: t.spacing(6),
+            padding: 4
+          }
+        };
+      },
       indicator: (t) => ({
-        backgroundColor: o.primary.beige[10],
+        backgroundColor: a.primary.beige[10],
         height: "5px",
         top: 0,
         bottom: "auto",
@@ -56,15 +90,18 @@ const i = {
           margin: "auto",
           width: "28%",
           height: "100%",
-          borderRadius: t.theme.spacing(2),
-          backgroundColor: o.primary.coral[100],
+          borderRadius: t.theme.spacing(3),
+          backgroundColor: a.primary.coral[100],
           transition: "width 0.3s ease"
+        },
+        ".MuiTabs-buttons &": {
+          display: "none"
         }
       })
     }
   }
 };
 export {
-  i as tabStyles,
-  a as tabsStyles
+  e as tabStyles,
+  n as tabsStyles
 };

package/dist/styles/typography.d.ts

@@ -3,21 +3,21 @@ export declare const toPx: (value: number) => string;
 export declare const toRem: (value: number, baseFontSize?: number) => string;
 declare const typography: {
     h1: {
-        fontWeight: string;
+        fontWeight: number;
         letterSpacing?: string | undefined;
         fontSize: string;
         lineHeight: string;
         fontFamily: string;
     };
     h2: {
-        fontWeight: string;
+        fontWeight: number;
         letterSpacing?: string | undefined;
         fontSize: string;
         lineHeight: string;
         fontFamily: string;
     };
     h3: {
-        fontWeight: string;
+        fontWeight: number;
         letterSpacing?: string | undefined;
         fontSize: string;
         lineHeight: string;
@@ -92,21 +92,21 @@ declare const typography: {
         fontFamily: string;
     };
     headingL: {
-        fontWeight: string;
+        fontWeight: number;
         letterSpacing?: string | undefined;
         fontSize: string;
         lineHeight: string;
         fontFamily: string;
     };
     headingM: {
-        fontWeight: string;
+        fontWeight: number;
         letterSpacing?: string | undefined;
         fontSize: string;
         lineHeight: string;
         fontFamily: string;
     };
     headingS: {
-        fontWeight: string;
+        fontWeight: number;
         letterSpacing?: string | undefined;
         fontSize: string;
         lineHeight: string;

package/dist/styles/typography.js

@@ -1,9 +1,9 @@
 import { primitives as t } from "./colors.js";
-const l = (a) => `${a}px`, y = (a, i) => Math.round(a * i) / 100, n = (a, i, f) => ({
-  fontSize: l(a),
-  lineHeight: l(i),
-  ...f !== void 0 && {
-    letterSpacing: l(y(a, f))
+const f = (a) => `${a}px`, y = (a, i) => Math.round(a * i) / 100, n = (a, i, l) => ({
+  fontSize: f(a),
+  lineHeight: f(i),
+  ...l !== void 0 && {
+    letterSpacing: f(y(a, l))
   }
 }), o = {
   displayXL: {
@@ -34,17 +34,17 @@ const l = (a) => `${a}px`, y = (a, i) => Math.round(a * i) / 100, n = (a, i, f)
   headingL: {
     fontFamily: t.fontFamily.sans,
     ...n(32, 38),
-    fontWeight: "bold"
+    fontWeight: 400
   },
   headingM: {
     fontFamily: t.fontFamily.sans,
     ...n(24, 32),
-    fontWeight: "bold"
+    fontWeight: 400
   },
   headingS: {
     fontFamily: t.fontFamily.sans,
     ...n(18, 22, 1),
-    fontWeight: "bold"
+    fontWeight: 400
   },
   textBody: {
     fontFamily: t.fontFamily.sans,
@@ -133,7 +133,7 @@ const l = (a) => `${a}px`, y = (a, i) => Math.round(a * i) / 100, n = (a, i, f)
   }
 };
 export {
-  l as toPx,
+  f as toPx,
   s as typography,
   m as typographyStyles
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.9.7",
+  "version": "1.9.27",
   "description": "The Spesia UI toolkit for React",
   "files": [
     "dist"
@@ -22,14 +22,6 @@
   },
   "type": "module",
   "private": false,
-  "lint-staged": {
-    "**/*.(js|jsx|ts|tsx)": [
-      "npx eslint --fix"
-    ],
-    "**/*.(js|jsx|ts|tsx|css|less|scss|md|json|yml|yaml)": [
-      "pnpm run format:fix"
-    ]
-  },
   "keywords": [],
   "author": "tinna@spesia.is",
   "license": "ISC",