@spesia/ui 1.8.21 → 1.9.7

package/dist/styles/palette.js

@@ -0,0 +1,150 @@
+import { tokens as t, colors as a } from "./colors.js";
+const y = {
+  mainShade: 50,
+  lighter: 10,
+  lighterAlt: 20,
+  light: 30,
+  hover: 60,
+  focus: 40,
+  dark: 100,
+  darkAlt: 80,
+  text: 80,
+  transparent: 10,
+  activeText: a.neutral.white
+}, s = {
+  mainShade: 40,
+  lighter: 100,
+  lighterAlt: 80,
+  light: 70,
+  hover: 40,
+  focus: 60,
+  dark: 10,
+  darkAlt: 20,
+  text: 20,
+  transparent: 90,
+  activeText: a.neutral.black
+}, d = {
+  10: "#FEE7E2",
+  20: "#FEDBD3",
+  30: "#FDCFC5",
+  40: "#FCAC99",
+  50: "#FB886D",
+  60: "#DE785C",
+  70: "#A25945",
+  80: "#6A3C30",
+  90: "#36211B",
+  100: "#180702"
+}, k = (r) => {
+  const n = r === "dark" ? s : y;
+  return {
+    mode: r,
+    primary: e(d, n),
+    secondary: e(a.primary.brown, n),
+    error: e(a.primary.red, n),
+    success: e(a.primary.green, n),
+    warning: e(
+      a.primary.yellow,
+      n,
+      a.neutral.black,
+      a.neutral.black
+    ),
+    info: e(a.primary.beige, n),
+    neutral: r === "dark" ? g(a.secondary.grey) : u(a.secondary.grey),
+    grey: {
+      50: a.secondary.grey[r === "dark" ? 80 : 20],
+      100: a.secondary.grey[r === "dark" ? 70 : 30],
+      200: a.secondary.grey[r === "dark" ? 60 : 40],
+      300: a.secondary.grey[50],
+      400: a.secondary.grey[r === "dark" ? 40 : 60],
+      700: a.secondary.grey[r === "dark" ? 30 : 70],
+      900: a.secondary.grey[r === "dark" ? 20 : 80]
+    },
+    text: {
+      primary: t.content.text.primary[r],
+      secondary: t.content.text.secondary[r],
+      tertiary: t.content.text.tertiary[r],
+      disabled: t.content.text.disabled[r],
+      contrastText: t.core.white[r],
+      primaryIcon: t.content.icon.primary[r],
+      secondaryIcon: t.content.icon.secondary[r],
+      tertiaryIcon: t.content.icon.tertiary[r]
+    },
+    background: {
+      default: t.content.background.primary[r],
+      paper: t.content.background.primary[r],
+      secondary: t.content.background.secondary[r],
+      secondaryPaper: t.content.background.coral[r],
+      coralBold: t.content.background.coralBold[r],
+      brownBold: t.content.background.brownBold[r],
+      alphaBrown: t.content.background.alphaBrown[r],
+      primaryButton: t.content.background.primaryButton[r],
+      secondaryButton: t.content.background.secondaryButton[r],
+      tertiaryButton: t.content.background.tertiaryButton[r],
+      transparent: t.content.background.transparent[r],
+      primaryLighter: t.semantic.primary.lighter[r],
+      primaryLight: t.semantic.primary.light[r],
+      primaryMain: t.semantic.primary.main[r],
+      primaryDark: t.semantic.primary.dark[r],
+      secondaryLighter: t.semantic.secondary.lighter[r],
+      secondaryLight: t.semantic.secondary.light[r],
+      secondaryMain: t.semantic.secondary.main[r],
+      secondaryDark: t.semantic.secondary.dark[r]
+    },
+    divider: t.content.border.tertiary[r],
+    border: {
+      primary: t.content.border.primary[r],
+      secondary: t.content.border.secondary[r]
+    }
+  };
+};
+function e(r, n, i = a.neutral.white, c = i) {
+  return {
+    lighter: r[n.lighter] ?? r[n.lighterAlt],
+    light: r[n.light],
+    main: r[n.mainShade],
+    hover: r[n.hover],
+    focus: r[n.focus],
+    dark: r[n.dark] ?? r[n.darkAlt],
+    text: r[n.text],
+    border: r[50],
+    active: n.activeText,
+    contrastText: i,
+    contrastTextAlt: c,
+    transparent: r[n.transparent]
+  };
+}
+function u(r) {
+  return {
+    lighter: r[20],
+    light: r[30],
+    main: r[70],
+    hover: r[80],
+    focus: r[80],
+    border: t.content.border.tertiary.light,
+    active: a.neutral.white,
+    contrastText: a.neutral.white,
+    text: r[80],
+    contrastTextAlt: a.neutral.white,
+    dark: r[100] ?? r[90] ?? r[80],
+    transparent: r[10] ?? r[20]
+  };
+}
+function g(r) {
+  return {
+    lighter: r[80],
+    light: r[70],
+    main: r[30],
+    hover: r[20],
+    focus: r[20],
+    border: t.content.border.tertiary.light,
+    active: a.neutral.black,
+    contrastText: a.neutral.black,
+    text: r[20],
+    contrastTextAlt: a.neutral.black,
+    dark: r[10] ?? r[20],
+    transparent: r[100]
+  };
+}
+export {
+  k as createPalette
+};

package/dist/styles/radio/radio.js

@@ -0,0 +1,37 @@
+import { jsx as t } from "react/jsx-runtime";
+import n from "../../components/radio/Checked.js";
+import c from "../../components/radio/Unchecked.js";
+const R = {
+  MuiRadio: {
+    defaultProps: {
+      icon: /* @__PURE__ */ t(c, {}),
+      checkedIcon: /* @__PURE__ */ t(n, {})
+    },
+    styleOverrides: {
+      root: (o) => {
+        var r, e, i, a, d;
+        return {
+          border: "none",
+          "&.MuiRadio-colorError svg.Radio-icon .Radio-border": {
+            borderColor: (r = o.theme.vars) == null ? void 0 : r.palette.error.main
+          },
+          "&.MuiRadio-colorInfo svg.Radio-icon .Radio-border": {
+            borderColor: (e = o.theme.vars) == null ? void 0 : e.palette.info.main
+          },
+          "&.MuiRadio-colorSuccess svg.Radio-icon .Radio-border": {
+            borderColor: (i = o.theme.vars) == null ? void 0 : i.palette.success.main
+          },
+          "&.MuiRadio-colorWarning svg.Radio-icon .Radio-border": {
+            borderColor: (a = o.theme.vars) == null ? void 0 : a.palette.warning.main
+          },
+          "&.Mui-disabled svg.Radio-icon .Radio-border": {
+            borderColor: (d = o.theme.vars) == null ? void 0 : d.palette.primary.lighter
+          }
+        };
+      }
+    }
+  }
+};
+export {
+  R as radioStyles
+};

package/dist/styles/slider/slider.js

@@ -0,0 +1,55 @@
+import { colors as e } from "../colors.js";
+const t = {
+  MuiSlider: {
+    styleOverrides: {
+      rail: ({ theme: r }) => {
+        var o;
+        return {
+          backgroundColor: (o = r.vars) == null ? void 0 : o.palette.background.secondary,
+          opacity: 1,
+          borderRadius: r.spacing(3),
+          height: "8px"
+        };
+      },
+      track: ({ theme: r }) => ({
+        borderRadius: r.spacing(3),
+        height: "6px"
+      }),
+      thumb: () => ({
+        borderColor: "currentcolor",
+        borderWidth: "4px",
+        borderStyle: "solid",
+        background: "white",
+        boxShadow: "none",
+        height: "18px",
+        width: "18px",
+        transition: "box-shadow 0.2s ease",
+        // Smooth movement between steps
+        "&:hover, &.Mui-focusVisible": {
+          boxShadow: "0px 0px 8px 8px rgba(25, 118, 210, 0.26)"
+          // Blue circle with 16% opacity
+        },
+        "&:active": {
+          boxShadow: "0px 0px 8px 8px rgba(25, 118, 210, 0.26)",
+          // Blue circle with 16% opacity
+          transition: "box-shadow 0.2s ease"
+          // Disable position transition while actively dragging
+        }
+      }),
+      valueLabel: () => ({
+        background: "white",
+        color: e.neutral.black,
+        boxShadow: "0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)",
+        borderColor: e.secondary.grey[20],
+        borderStyle: "solid",
+        borderWidth: "1px",
+        fontWeight: 600,
+        fontSize: "12px",
+        borderRadius: 4
+      })
+    }
+  }
+};
+export {
+  t as sliderStyles
+};

package/dist/styles/switch/switch.js

@@ -0,0 +1,63 @@
+const d = {
+  MuiSwitch: {
+    styleOverrides: {
+      root: (t) => {
+        var e, r, o, c;
+        let i = t.ownerState.color;
+        (!i || i === "default") && (i = "primary");
+        const a = t.theme.palette[i];
+        return {
+          width: 48,
+          height: 32,
+          padding: 6,
+          "& .MuiSwitch-switchBase": {
+            padding: 6,
+            margin: 2,
+            transitionDuration: "300ms",
+            "&.Mui-checked": {
+              transform: "translateX(16px)",
+              color: "#fff",
+              "& + .MuiSwitch-track": {
+                backgroundColor: (a == null ? void 0 : a.main) ?? ((e = t.theme.vars) == null ? void 0 : e.palette.primary.main),
+                opacity: 1,
+                border: 0
+              },
+              "&.Mui-disabled + .MuiSwitch-track": {
+                opacity: 0.5
+              }
+            },
+            "&.Mui-focusVisible .MuiSwitch-thumb": {
+              color: (r = t.theme.vars) == null ? void 0 : r.palette.background.default,
+              boxShadow: "0 0 0 8px rgba(0, 0, 0, 0.16)"
+            },
+            "&.Mui-disabled .MuiSwitch-thumb": {
+              color: (o = t.theme.vars) == null ? void 0 : o.palette.background.default
+            },
+            "&.Mui-disabled + .MuiSwitch-track": {
+              opacity: 0.7,
+              ...t.theme.applyStyles("dark", {
+                opacity: 0.3
+              })
+            }
+          },
+          "& .MuiSwitch-thumb": {
+            boxSizing: "border-box",
+            width: 16,
+            height: 16
+          },
+          "& .MuiSwitch-track": {
+            borderRadius: 13,
+            backgroundColor: (c = t.theme.vars) == null ? void 0 : c.palette.background.secondary,
+            opacity: 1,
+            transition: t.theme.transitions.create(["background-color"], {
+              duration: 500
+            })
+          }
+        };
+      }
+    }
+  }
+};
+export {
+  d as switchStyles
+};

package/dist/styles/tab/tab.js

@@ -0,0 +1,70 @@
+import { colors as o } from "../colors.js";
+const i = {
+  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": {
+          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,
+            color: t.vars.palette.text.primary,
+            padding: t.spacing(0.5, 1),
+            display: "flex",
+            alignItems: "center"
+          }
+        }
+      })
+    }
+  }
+}, a = {
+  MuiTabs: {
+    styleOverrides: {
+      root: () => ({}),
+      list: () => ({
+        counterReset: "MuiTab-root"
+      }),
+      indicator: (t) => ({
+        backgroundColor: o.primary.beige[10],
+        height: "5px",
+        top: 0,
+        bottom: "auto",
+        borderRadius: t.theme.spacing(2),
+        "&:after": {
+          content: '""',
+          position: "absolute",
+          left: 0,
+          right: "auto",
+          top: 0,
+          bottom: 0,
+          margin: "auto",
+          width: "28%",
+          height: "100%",
+          borderRadius: t.theme.spacing(2),
+          backgroundColor: o.primary.coral[100],
+          transition: "width 0.3s ease"
+        }
+      })
+    }
+  }
+};
+export {
+  i as tabStyles,
+  a as tabsStyles
+};

package/dist/styles/tooltip/tooltip.js

@@ -0,0 +1,19 @@
+const e = {
+  MuiTooltip: {
+    styleOverrides: {
+      tooltip: (t) => ({
+        backgroundColor: t.theme.vars.palette.background.brownBold,
+        borderRadius: t.theme.spacing(3),
+        p: 1,
+        textAlign: "center",
+        color: t.theme.vars.palette.text.contrastText
+      }),
+      arrow: (t) => ({
+        color: t.theme.vars.palette.background.brownBold
+      })
+    }
+  }
+};
+export {
+  e as tooltipStyles
+};

package/dist/styles/typography.js

@@ -0,0 +1,139 @@
+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))
+  }
+}), o = {
+  displayXL: {
+    fontFamily: t.fontFamily.serif,
+    ...n(96, 90, -1),
+    fontWeight: "bold"
+  },
+  displayL: {
+    fontFamily: t.fontFamily.serif,
+    ...n(68, 68, -1),
+    fontWeight: "bold"
+  },
+  displayM: {
+    fontFamily: t.fontFamily.serif,
+    ...n(48, 48, -1),
+    fontWeight: "bold"
+  },
+  displayS: {
+    fontFamily: t.fontFamily.serif,
+    ...n(42, 42 * 1.1, -1),
+    fontWeight: "bold"
+  },
+  displayXS: {
+    fontFamily: t.fontFamily.serif,
+    ...n(32, 32 * 1.1, -1),
+    fontWeight: "bold"
+  },
+  headingL: {
+    fontFamily: t.fontFamily.sans,
+    ...n(32, 38),
+    fontWeight: "bold"
+  },
+  headingM: {
+    fontFamily: t.fontFamily.sans,
+    ...n(24, 32),
+    fontWeight: "bold"
+  },
+  headingS: {
+    fontFamily: t.fontFamily.sans,
+    ...n(18, 22, 1),
+    fontWeight: "bold"
+  },
+  textBody: {
+    fontFamily: t.fontFamily.sans,
+    ...n(24, 32, 1)
+  },
+  textXL: {
+    fontFamily: t.fontFamily.sans,
+    ...n(20, 26, 1)
+  },
+  textL: {
+    fontFamily: t.fontFamily.sans,
+    ...n(17, 17 * 1.15)
+  },
+  textM: {
+    fontFamily: t.fontFamily.sans,
+    ...n(14, 20, 1)
+  },
+  textS: {
+    fontFamily: t.fontFamily.sans,
+    ...n(12, 12 * 1.35, 1)
+  },
+  footnote: {
+    fontFamily: t.fontFamily.mono,
+    ...n(12, 13.2, 0.25)
+  },
+  mono: {
+    fontFamily: t.fontFamily.mono,
+    ...n(12, 22, 0.1)
+  },
+  button: {
+    fontFamily: t.fontFamily.sans,
+    ...n(17, 16),
+    fontWeight: 500,
+    textTransform: "none"
+  },
+  buttonSmall: {
+    fontFamily: t.fontFamily.sans,
+    ...n(15, 16),
+    fontWeight: 500,
+    textTransform: "none"
+  }
+}, s = {
+  fontFamily: t.fontFamily.sans,
+  htmlFontSize: 14,
+  ...o,
+  h1: o.headingL,
+  h2: o.headingM,
+  h3: o.headingS,
+  h4: {
+    ...o.textBody,
+    fontWeight: 500
+  },
+  h5: {
+    ...o.textXL,
+    fontWeight: 500
+  },
+  h6: {
+    ...o.textL,
+    fontWeight: 500
+  },
+  body1: o.textL,
+  body2: o.textM
+}, m = {
+  MuiTypography: {
+    defaultProps: {
+      variantMapping: {
+        displayXL: "h1",
+        displayL: "h2",
+        displayM: "h3",
+        displayS: "h4",
+        displayXS: "h5",
+        headingL: "h1",
+        headingM: "h2",
+        headingS: "h3",
+        textBody: "p",
+        textXL: "p",
+        textL: "p",
+        textM: "p",
+        textS: "p",
+        footnote: "span",
+        mono: "span",
+        button: "span",
+        buttonSmall: "span"
+      }
+    }
+  }
+};
+export {
+  l as toPx,
+  s as typography,
+  m as typographyStyles
+};

package/dist/themes.js

@@ -0,0 +1,35 @@
+const e = {
+  spesiaTheme: {
+    name: "spesiaTheme",
+    primary: "#2e8898",
+    transparentPrimary: "rgb(88, 134, 150, 0.3)",
+    secondary: "#f5e9e8",
+    transparentSecondary: "rgb(210, 178, 162, 0.3)",
+    success: "#00f67e",
+    transparentSuccess: "#edf4ec",
+    inverted: "#F3EBEA",
+    contrastText: "#fff",
+    background: {
+      default: "#ffffff",
+      home: "#cdd2d8"
+    },
+    progress: {
+      bar: { xs: "#ccc", md: "#ffffff" },
+      steps: ["#498898", "#5c98a7", "#6ea2ae", "#7eaab4", "#98bac2"]
+    },
+    nav: {
+      home: {
+        background: "#cdd2d8",
+        contrastText: "#000"
+      },
+      default: {
+        background: "#588696",
+        contrastText: "#000"
+      }
+    }
+  }
+}, a = "spesiaTheme";
+export {
+  a as defaultTheme,
+  e as themes
+};

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.21",
+  "version": "1.9.7",
   "description": "The Spesia UI toolkit for React",
   "files": [
     "dist"
@@ -14,6 +14,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js"
     }
   },
   "type": "module",
@@ -92,6 +96,7 @@
   "homepage": "https://ui.test.spesia.is",
   "scripts": {
     "build": "tsc && vite build",
+    "build:analyze": "vite build && npx vite-bundle-visualizer",
     "test:ci": "vitest run",
     "test:watch": "vitest",
     "test-storybook": "test-storybook",