@solostylist/ui-kit 1.0.112 → 1.0.114

package/dist/theme/theme-primitives.js

@@ -1,6 +1,6 @@
-import { a as i } from "../createTheme-YLBX8GSj.js";
-import { a as s } from "../colorManipulator-ep5lERxB.js";
-const a = i(), r = {
+import { a as b } from "../createTheme-ubqb7_yU.js";
+import { a as l } from "../colorManipulator-ep5lERxB.js";
+const h = b(), e = {
   50: "hsl(210, 100%, 95%)",
   100: "hsl(210, 100%, 92%)",
   200: "hsl(210, 100%, 80%)",
@@ -11,28 +11,40 @@ const a = i(), r = {
   700: "hsl(210, 100%, 35%)",
   800: "hsl(210, 100%, 16%)",
   900: "hsl(210, 100%, 21%)"
-}, h = {
-  50: "rgb(243, 246, 250)",
-  // hsl(220, 35%, 97%)
-  100: "rgb(235, 238, 244)",
-  // hsl(220, 30%, 94%)
-  200: "rgb(218, 222, 231)",
-  // hsl(220, 20%, 88%)
-  300: "rgb(194, 201, 214)",
-  // hsl(220, 20%, 80%)
-  400: "rgb(148, 160, 184)",
-  // hsl(220, 20%, 65%)
-  500: "rgb(86, 100, 129)",
-  // hsl(220, 20%, 42%)
-  600: "rgb(71, 83, 107)",
-  // hsl(220, 20%, 35%)
-  700: "rgb(51, 60, 77)",
-  // hsl(220, 20%, 25%)
-  800: "rgb(11, 14, 20)",
-  // hsl(220, 30%, 6%)
-  900: "rgb(5, 7, 10)"
-  // hsl(220, 35%, 3%)
-}, l = {
+}, s = {
+  50: "hsl(220, 60%, 98%)",
+  100: "hsl(220, 55%, 95%)",
+  200: "hsl(220, 50%, 88%)",
+  300: "hsl(220, 45%, 75%)",
+  400: "hsl(220, 70%, 58%)",
+  500: "hsl(220, 85%, 47%)",
+  600: "hsl(220, 90%, 39%)",
+  700: "hsl(220, 95%, 31%)",
+  800: "hsl(220, 100%, 24%)",
+  900: "hsl(220, 100%, 18%)"
+}, r = {
+  50: "hsl(220, 35%, 97%)",
+  100: "hsl(220, 30%, 94%)",
+  200: "hsl(220, 20%, 88%)",
+  300: "hsl(220, 20%, 80%)",
+  400: "hsl(220, 20%, 65%)",
+  500: "hsl(220, 20%, 42%)",
+  600: "hsl(220, 20%, 35%)",
+  700: "hsl(220, 20%, 25%)",
+  800: "hsl(220, 30%, 6%)",
+  900: "hsl(220, 35%, 3%)"
+}, T = {
+  50: "hsl(210, 20%, 98%)",
+  100: "hsl(210, 15%, 95%)",
+  200: "hsl(210, 12%, 89%)",
+  300: "hsl(210, 10%, 78%)",
+  400: "hsl(210, 9%, 65%)",
+  500: "hsl(210, 8%, 50%)",
+  600: "hsl(210, 12%, 42%)",
+  700: "hsl(210, 18%, 35%)",
+  800: "hsl(210, 24%, 28%)",
+  900: "hsl(210, 30%, 22%)"
+}, i = {
   50: "hsl(120, 80%, 98%)",
   100: "hsl(120, 75%, 94%)",
   200: "hsl(120, 75%, 87%)",
@@ -43,6 +55,17 @@ const a = i(), r = {
   700: "hsl(120, 75%, 16%)",
   800: "hsl(120, 84%, 10%)",
   900: "hsl(120, 87%, 6%)"
+}, n = {
+  50: "hsl(151, 60%, 98%)",
+  100: "hsl(151, 55%, 95%)",
+  200: "hsl(151, 50%, 88%)",
+  300: "hsl(151, 45%, 78%)",
+  400: "hsl(151, 65%, 62%)",
+  500: "hsl(151, 75%, 47%)",
+  600: "hsl(151, 85%, 38%)",
+  700: "hsl(151, 90%, 30%)",
+  800: "hsl(151, 95%, 23%)",
+  900: "hsl(151, 100%, 17%)"
 }, o = {
   50: "hsl(45, 100%, 97%)",
   100: "hsl(45, 92%, 90%)",
@@ -54,7 +77,18 @@ const a = i(), r = {
   700: "hsl(45, 94%, 20%)",
   800: "hsl(45, 95%, 16%)",
   900: "hsl(45, 93%, 12%)"
-}, f = {
+}, g = {
+  50: "hsl(48, 100%, 98%)",
+  100: "hsl(48, 95%, 94%)",
+  200: "hsl(48, 90%, 86%)",
+  300: "hsl(48, 85%, 72%)",
+  400: "hsl(48, 88%, 58%)",
+  500: "hsl(48, 92%, 50%)",
+  600: "hsl(48, 95%, 42%)",
+  700: "hsl(48, 100%, 35%)",
+  800: "hsl(48, 100%, 28%)",
+  900: "hsl(48, 100%, 22%)"
+}, p = {
   50: "hsl(210, 100%, 98%)",
   100: "hsl(210, 95%, 94%)",
   200: "hsl(210, 90%, 87%)",
@@ -65,7 +99,18 @@ const a = i(), r = {
   700: "hsl(210, 95%, 25%)",
   800: "hsl(210, 100%, 15%)",
   900: "hsl(210, 100%, 10%)"
-}, g = {
+}, d = {
+  50: "hsl(204, 100%, 98%)",
+  100: "hsl(204, 95%, 94%)",
+  200: "hsl(204, 90%, 86%)",
+  300: "hsl(204, 85%, 74%)",
+  400: "hsl(204, 88%, 60%)",
+  500: "hsl(204, 92%, 48%)",
+  600: "hsl(204, 95%, 40%)",
+  700: "hsl(204, 100%, 32%)",
+  800: "hsl(204, 100%, 25%)",
+  900: "hsl(204, 100%, 19%)"
+}, c = {
   50: "hsl(0, 100%, 97%)",
   100: "hsl(0, 92%, 90%)",
   200: "hsl(0, 94%, 80%)",
@@ -76,7 +121,18 @@ const a = i(), r = {
   700: "hsl(0, 94%, 18%)",
   800: "hsl(0, 95%, 12%)",
   900: "hsl(0, 93%, 6%)"
-}, y = {
+}, f = {
+  50: "hsl(356, 100%, 98%)",
+  100: "hsl(356, 95%, 94%)",
+  200: "hsl(356, 90%, 87%)",
+  300: "hsl(356, 85%, 75%)",
+  400: "hsl(356, 88%, 61%)",
+  500: "hsl(356, 92%, 50%)",
+  600: "hsl(356, 95%, 42%)",
+  700: "hsl(356, 100%, 34%)",
+  800: "hsl(356, 100%, 27%)",
+  900: "hsl(356, 100%, 21%)"
+}, w = {
   50: "hsl(270, 100%, 98%)",
   100: "hsl(270, 95%, 94%)",
   200: "hsl(270, 90%, 87%)",
@@ -87,7 +143,18 @@ const a = i(), r = {
   700: "hsl(270, 75%, 25%)",
   800: "hsl(270, 80%, 15%)",
   900: "hsl(270, 85%, 10%)"
-}, t = {
+}, S = {
+  50: "hsl(280, 60%, 98%)",
+  100: "hsl(280, 55%, 95%)",
+  200: "hsl(280, 50%, 88%)",
+  300: "hsl(280, 45%, 78%)",
+  400: "hsl(280, 65%, 65%)",
+  500: "hsl(280, 75%, 52%)",
+  600: "hsl(280, 85%, 42%)",
+  700: "hsl(280, 90%, 34%)",
+  800: "hsl(280, 95%, 27%)",
+  900: "hsl(280, 100%, 21%)"
+}, a = {
   0: "rgba(0,0,0,0)",
   10: "rgba(0,0,0,0.1)",
   20: "rgba(0,0,0,0.2)",
@@ -99,7 +166,7 @@ const a = i(), r = {
   80: "rgba(0,0,0,0.8)",
   90: "rgba(0,0,0,0.9)",
   100: "rgba(0,0,0,1)"
-}, e = {
+}, t = {
   0: "rgba(255,255,255,0)",
   10: "rgba(255,255,255,0.1)",
   20: "rgba(255,255,255,0.2)",
@@ -111,7 +178,7 @@ const a = i(), r = {
   80: "rgba(255,255,255,0.8)",
   90: "rgba(255,255,255,0.9)",
   100: "rgba(255,255,255,1)"
-}, n = {
+}, m = {
   palette: {
     gradient: {
       primary: "linear-gradient(90deg, #1469be 0%, #43ecff 100%);",
@@ -120,27 +187,27 @@ const a = i(), r = {
       sky: "linear-gradient(to right, transparent, #0ea5e9, transparent)"
     },
     blackAlpha: {
-      zero: t[0],
+      zero: a[0],
       // không có
-      light: t[10],
+      light: a[10],
       // nhẹ, subtle
-      medium: t[50],
+      medium: a[50],
       // vừa, balanced
-      dark: t[80],
+      dark: a[80],
       // đậm, mạnh
-      full: t[100]
+      full: a[100]
       // đầy đủ
     },
     whiteAlpha: {
-      zero: e[0],
+      zero: t[0],
       // không có
-      light: e[10],
+      light: t[10],
       // nhẹ, subtle
-      medium: e[50],
+      medium: t[50],
       // vừa, balanced
-      dark: e[80],
+      dark: t[80],
       // đậm, mạnh
-      full: e[100]
+      full: t[100]
       // đầy đủ
     },
     ui: {
@@ -153,113 +220,249 @@ const a = i(), r = {
       }
     },
     primary: {
-      contrastText: r[50],
-      light: r[300],
-      main: r[400],
-      dark: r[700],
+      contrastText: e[50],
+      light: e[400],
+      main: e[500],
+      dark: e[700],
       white: "#ffffff",
       black: "#000000"
     },
     info: {
-      contrastText: r[300],
-      light: r[500],
-      main: r[700],
-      dark: r[900]
+      contrastText: p[50],
+      light: p[400],
+      main: p[500],
+      dark: p[700]
     },
     warning: {
+      contrastText: o[50],
       light: o[400],
       main: o[500],
       dark: o[700]
     },
     error: {
-      light: g[400],
-      main: g[500],
-      dark: g[700]
+      contrastText: c[50],
+      light: c[400],
+      main: c[500],
+      dark: c[700]
     },
     success: {
-      light: l[400],
-      main: l[500],
-      dark: l[700]
+      contrastText: i[50],
+      light: i[400],
+      main: i[500],
+      dark: i[700]
     },
-    grey: h,
-    divider: s(h[700], 0.6),
+    grey: r,
+    divider: l(r[700], 0.6),
     background: {
-      default: h[900],
+      default: r[900],
       paper: "hsl(220, 30%, 7%)"
     },
     text: {
       primary: "rgb(255, 255, 255)",
-      secondary: h[400]
+      secondary: r[400]
     },
     action: {
-      hover: s(h[600], 0.2),
-      selected: s(h[600], 0.3)
+      hover: l(r[600], 0.2),
+      selected: l(r[600], 0.3)
     },
     baseShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
   }
-}, p = n, m = { light: p, dark: n }, x = {
+}, y = {
+  palette: {
+    gradient: {
+      primary: "linear-gradient(90deg, #1469be 0%, #43ecff 100%);",
+      secondary: "linear-gradient(90deg, #0088F6 0%, #1DDD83 77.25%)",
+      indigo: "linear-gradient(to right, transparent, #6366f1, transparent)",
+      sky: "linear-gradient(to right, transparent, #0ea5e9, transparent)"
+    },
+    blackAlpha: {
+      zero: a[0],
+      // transparent
+      light: a[10],
+      // very subtle overlay for light theme
+      medium: a[50],
+      // light overlay for light theme
+      dark: a[80],
+      // moderate overlay for light theme
+      full: a[100]
+      // opaque black
+    },
+    whiteAlpha: {
+      zero: t[0],
+      // transparent
+      light: t[10],
+      // strong white overlay for light theme
+      medium: t[50],
+      // stronger white overlay
+      dark: t[80],
+      // very strong white overlay
+      full: t[100]
+      // opaque white
+    },
+    ui: {
+      pulse: {
+        shadowLight: `${l(s[500], 0.12)}`,
+        shadowMedium: `${l(s[500], 0.18)}`,
+        ring: `${l(s[500], 0.3)}`,
+        background: `${l(s[500], 0.05)}`,
+        radialGradient: `radial-gradient(circle, ${l(s[500], 0.08)} 0%, ${l(s[500], 0.03)} 50%, transparent 100%)`
+      }
+    },
+    primary: {
+      contrastText: s[50],
+      light: s[200],
+      // Light brand color for light theme
+      main: s[500],
+      // Main brand color optimized for light backgrounds
+      dark: s[700],
+      // Dark brand color for strong contrast
+      white: "#ffffff",
+      black: "#000000"
+    },
+    info: {
+      contrastText: d[50],
+      light: d[200],
+      // Light blue for light theme
+      main: d[500],
+      // Main blue for light theme
+      dark: d[700]
+      // Dark blue for light theme
+    },
+    warning: {
+      contrastText: g[50],
+      light: g[200],
+      // Light orange for light theme
+      main: g[500],
+      // Main orange for light theme
+      dark: g[700]
+      // Dark orange for light theme
+    },
+    error: {
+      contrastText: f[50],
+      light: f[200],
+      // Light red for light theme
+      main: f[500],
+      // Main red for light theme
+      dark: f[700]
+      // Dark red for light theme
+    },
+    success: {
+      contrastText: n[50],
+      light: n[200],
+      // Light green for light theme
+      main: n[500],
+      // Main green for light theme
+      dark: n[700]
+      // Dark green for light theme
+    },
+    grey: r,
+    divider: "hsl(214, 32%, 91%)",
+    // Sophisticated light dividers
+    background: {
+      default: "#f8fafc",
+      // Premium light background (slate-inspired)
+      paper: "#ffffff",
+      // Pure white for elevated surfaces
+      surface: s[50],
+      // Subtle brand-tinted surface
+      elevated: "#ffffff"
+      // Elevated surfaces (modals, dropdowns)
+    },
+    text: {
+      primary: "hsl(222, 84%, 4.9%)",
+      // Premium dark text (almost black with subtle hue)
+      secondary: "hsl(215, 16%, 47%)",
+      // Balanced secondary text
+      tertiary: "hsl(215, 14%, 65%)",
+      // Light secondary text
+      disabled: "hsl(215, 14%, 75%)"
+      // Disabled text
+    },
+    action: {
+      hover: l(s[500], 0.08),
+      // Brand-tinted hover
+      selected: l(s[500], 0.12),
+      // Brand-tinted selection
+      disabled: "hsl(215, 14%, 75%)",
+      // Disabled state
+      disabledBackground: "hsl(215, 20%, 95%)",
+      // Disabled background
+      focus: l(s[500], 0.16)
+      // Prominent focus state
+    },
+    baseShadow: "rgba(15, 23, 42, 0.08) 0px 2px 8px 0px, rgba(15, 23, 42, 0.04) 0px 1px 2px -1px"
+    // Premium shadows with subtle slate tint
+  }
+}, z = { light: y, dark: m }, R = {
   fontFamily: "Outfit, sans-serif",
   h1: {
-    fontSize: a.typography.pxToRem(48),
+    fontSize: h.typography.pxToRem(48),
     fontWeight: 600,
     lineHeight: 1.2,
     letterSpacing: -0.5
   },
   h2: {
-    fontSize: a.typography.pxToRem(36),
+    fontSize: h.typography.pxToRem(36),
     fontWeight: 600,
     lineHeight: 1.2
   },
   h3: {
-    fontSize: a.typography.pxToRem(30),
+    fontSize: h.typography.pxToRem(30),
     lineHeight: 1.2
   },
   h4: {
-    fontSize: a.typography.pxToRem(24),
+    fontSize: h.typography.pxToRem(24),
     fontWeight: 600,
     lineHeight: 1.5
   },
   h5: {
-    fontSize: a.typography.pxToRem(20),
+    fontSize: h.typography.pxToRem(20),
     fontWeight: 600
   },
   h6: {
-    fontSize: a.typography.pxToRem(18),
+    fontSize: h.typography.pxToRem(18),
     fontWeight: 600
   },
   subtitle1: {
-    fontSize: a.typography.pxToRem(18)
+    fontSize: h.typography.pxToRem(18)
   },
   subtitle2: {
-    fontSize: a.typography.pxToRem(14),
+    fontSize: h.typography.pxToRem(14),
     fontWeight: 500
   },
   body1: {
-    fontSize: a.typography.pxToRem(14)
+    fontSize: h.typography.pxToRem(14)
   },
   body2: {
-    fontSize: a.typography.pxToRem(14),
+    fontSize: h.typography.pxToRem(14),
     fontWeight: 400
   },
   caption: {
-    fontSize: a.typography.pxToRem(12),
+    fontSize: h.typography.pxToRem(12),
     fontWeight: 400
   }
-}, u = {
+}, W = {
   borderRadius: 8
-}, b = ["none", "var(--s-palette-baseShadow)", ...a.shadows.slice(2)], S = b;
+}, x = ["none", "var(--s-palette-baseShadow)", ...h.shadows.slice(2)], v = x;
 export {
-  t as blackAlpha,
-  f as blue,
-  r as brand,
-  m as colorSchemes,
-  h as gray,
-  l as green,
+  a as blackAlpha,
+  p as blue,
+  e as brand,
+  z as colorSchemes,
+  r as gray,
+  i as green,
+  d as lightBlue,
+  s as lightBrand,
+  T as lightGray,
+  n as lightGreen,
+  g as lightOrange,
+  S as lightPurple,
+  f as lightRed,
   o as orange,
-  y as purple,
-  g as red,
-  S as shadows,
-  u as shape,
-  x as typography,
-  e as whiteAlpha
+  w as purple,
+  c as red,
+  v as shadows,
+  W as shape,
+  R as typography,
+  t as whiteAlpha
 };

package/dist/useId-CK6Kn3Tn.js

@@ -0,0 +1,21 @@
+import * as u from "react";
+let n = 0;
+function o(t) {
+  const [e, a] = u.useState(t), c = t || e;
+  return u.useEffect(() => {
+    e == null && (n += 1, a(`mui-${n}`));
+  }, [e]), c;
+}
+const f = {
+  ...u
+}, s = f.useId;
+function l(t) {
+  if (s !== void 0) {
+    const e = s();
+    return t ?? e;
+  }
+  return o(t);
+}
+export {
+  l as u
+};