@solostylist/ui-kit 1.0.80 → 1.0.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/s-glow-button/s-glow-button.js +16 -17
  2. package/dist/s-label/s-label.js +12 -6
  3. package/dist/theme/components/button.js +60 -59
  4. package/package.json +1 -1
package/dist/s-glow-button/s-glow-button.js CHANGED
@@ -1,35 +1,34 @@
1
- import { j as e } from "../jsx-runtime-DywqP_6a.js";
2
- import { useRef as l } from "react";
3
- import { Button as n, Box as s } from "@mui/material";
4
- import u from "../s-moving-border/s-moving-border.js";
1
+ import { j as t } from "../jsx-runtime-DywqP_6a.js";
2
+ import { useRef as a } from "react";
3
+ import { Button as l, Box as s } from "@mui/material";
4
+ import p from "../s-moving-border/s-moving-border.js";
5
5
  import '../assets/s-glow-button.css';const x = ({
6
- borderRadius: t = 12,
6
+ borderRadius: e = 12,
7
7
  children: r,
8
8
  duration: o = 6e3,
9
9
  // 6 second animation cycle
10
- ...a
10
+ ...i
11
11
  }) => {
12
- const i = l(null);
13
- return /* @__PURE__ */ e.jsx(u, { duration: o, borderRadius: t, height: 60, glowSize: 100, children: /* @__PURE__ */ e.jsx(
14
- n,
12
+ const n = a(null);
13
+ return /* @__PURE__ */ t.jsx(p, { duration: o, borderRadius: e, height: 60, glowSize: 100, children: /* @__PURE__ */ t.jsx(
14
+ l,
15
15
  {
16
16
  sx: {
17
17
  height: "100%",
18
- borderRadius: t,
19
- background: "var(--s-palette-background-default)",
18
+ borderRadius: e,
19
+ background: "var(--s-palette-background-default) !important",
20
20
  // CSS custom property for theming
21
- border: "1px solid var(--s-palette-divider)",
21
+ border: "1px solid var(--s-palette-divider) !important",
22
22
  // CSS custom property for theming
23
23
  "&:hover": {
24
- backgroundColor: "var(--s-palette-background-paper)"
25
- // CSS custom property for theming
24
+ background: "inherit !important"
26
25
  }
27
26
  },
28
- ref: i,
27
+ ref: n,
29
28
  disableRipple: !0,
30
- ...a,
29
+ ...i,
31
30
  fullWidth: !0,
32
- children: /* @__PURE__ */ e.jsx(s, { className: "gradient-text", fontSize: 16, children: r })
31
+ children: /* @__PURE__ */ t.jsx(s, { className: "gradient-text", fontSize: 16, children: r })
33
32
  }
34
33
  ) });
35
34
  };
package/dist/s-label/s-label.js CHANGED
@@ -1,12 +1,18 @@
1
1
  import { j as e } from "../jsx-runtime-DywqP_6a.js";
2
- import { c as o } from "../createSvgIcon-9XY7lJan.js";
3
- import { Stack as i, Tooltip as r } from "@mui/material";
4
- const c = o(/* @__PURE__ */ e.jsx("path", {
2
+ import { c as r } from "../createSvgIcon-9XY7lJan.js";
3
+ import { Stack as i, Tooltip as s } from "@mui/material";
4
+ const c = r(/* @__PURE__ */ e.jsx("path", {
5
5
  d: "M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4"
6
- }), "HelpOutlineOutlined"), d = ({ label: n, children: l, hint: t, sx: s }) => /* @__PURE__ */ e.jsxs(i, { width: "100%", sx: s, children: [
6
+ }), "HelpOutlineOutlined"), d = ({ label: n, children: l, hint: t, sx: o }) => /* @__PURE__ */ e.jsxs(i, { width: "100%", sx: o, children: [
7
7
  /* @__PURE__ */ e.jsxs(i, { direction: "row", alignItems: "center", children: [
8
- /* @__PURE__ */ e.jsx("div", { style: { fontSize: "1rem", fontWeight: 500, lineHeight: 1.57 }, children: n }),
9
- t ? /* @__PURE__ */ e.jsx(r, { title: t, placement: "top", children: /* @__PURE__ */ e.jsx(c, { style: { marginLeft: "4px", fontSize: 16 } }) }) : null
8
+ /* @__PURE__ */ e.jsx(
9
+ "div",
10
+ {
11
+ style: { fontSize: "0.875rem", fontWeight: 500, lineHeight: 1.57, color: "var(--s-palette-text-secondary)" },
12
+ children: n
13
+ }
14
+ ),
15
+ t ? /* @__PURE__ */ e.jsx(s, { title: t, placement: "top", children: /* @__PURE__ */ e.jsx(c, { style: { marginLeft: "4px", fontSize: 16 } }) }) : null
10
16
  ] }),
11
17
  l
12
18
  ] });
package/dist/theme/components/button.js CHANGED
@@ -1,9 +1,9 @@
1
- import { brand as i, purple as n, green as d, red as s, blue as t, orange as u } from "../theme-primitives.js";
2
- const o = (a, r) => a === "text" || a === "outlined" ? "transparent" : r, l = (a, r, v) => a === "text" || a === "outlined" ? v : r, c = {
1
+ import { gray as u, brand as v, purple as i, green as n, red as s, blue as d, orange as t } from "../theme-primitives.js";
2
+ const a = (o, r) => o === "text" || o === "outlined" ? "transparent" : r, l = (o, r, p) => o === "text" || o === "outlined" ? p : r, b = {
3
3
  styleOverrides: {
4
- root: ({ theme: a, ownerState: r }) => ({
4
+ root: ({ theme: o, ownerState: r }) => ({
5
5
  boxShadow: "none",
6
- borderRadius: (a.vars || a).shape.borderRadius,
6
+ borderRadius: (o.vars || o).shape.borderRadius,
7
7
  textTransform: "none",
8
8
  transition: "all 0.2s ease-in-out",
9
9
  variants: [
@@ -39,20 +39,21 @@ const o = (a, r) => a === "text" || a === "outlined" ? "transparent" : r, l = (a
39
39
  color: "primary"
40
40
  },
41
41
  style: {
42
- ...a.applyStyles("dark", {
43
- backgroundColor: o(r.variant, i[800]),
44
- color: l(r.variant, i[50], i[500]),
45
- borderColor: r.variant === "outlined" ? i[500] : "transparent",
42
+ ...o.applyStyles("dark", {
43
+ backgroundColor: a(r.variant, v[800]),
44
+ color: l(r.variant, v[50], u[300]),
45
+ borderColor: r.variant === "outlined" ? u[300] : "transparent",
46
46
  "&:hover": {
47
- backgroundColor: o(r.variant, i[900]),
48
- color: l(r.variant, i[100], i[400]),
49
- borderColor: r.variant === "outlined" ? i[400] : "transparent"
47
+ backgroundColor: a(r.variant, v[900]),
48
+ color: l(r.variant, v[100], (o.vars || o).palette.text.primary),
49
+ borderColor: r.variant === "outlined" ? (o.vars || o).palette.text.primary : "transparent"
50
+ // For text and outlined, when hovered
50
51
  },
51
52
  "&:active": { filter: "brightness(1.1)" },
52
53
  "&.Mui-disabled": {
53
- backgroundColor: o(r.variant, i[800]),
54
- color: i[900],
55
- borderColor: r.variant === "outlined" ? i[900] : "transparent"
54
+ backgroundColor: a(r.variant, v[800]),
55
+ color: u[700],
56
+ borderColor: r.variant === "outlined" ? u[700] : "transparent"
56
57
  }
57
58
  // '&.MuiButton-loading': {
58
59
  // '& .MuiButton-loadingIndicator': {
@@ -67,20 +68,20 @@ const o = (a, r) => a === "text" || a === "outlined" ? "transparent" : r, l = (a
67
68
  color: "secondary"
68
69
  },
69
70
  style: {
70
- ...a.applyStyles("dark", {
71
- backgroundColor: o(r.variant, n[800]),
72
- color: l(r.variant, n[50], n[500]),
73
- borderColor: r.variant === "outlined" ? n[500] : "transparent",
71
+ ...o.applyStyles("dark", {
72
+ backgroundColor: a(r.variant, i[800]),
73
+ color: l(r.variant, i[50], i[500]),
74
+ borderColor: r.variant === "outlined" ? i[500] : "transparent",
74
75
  "&:hover": {
75
- backgroundColor: o(r.variant, n[900]),
76
- color: l(r.variant, n[100], n[400]),
77
- borderColor: r.variant === "outlined" ? n[400] : "transparent"
76
+ backgroundColor: a(r.variant, i[900]),
77
+ color: l(r.variant, i[100], i[400]),
78
+ borderColor: r.variant === "outlined" ? i[400] : "transparent"
78
79
  },
79
80
  "&:active": { filter: "brightness(1.1)" },
80
81
  "&.Mui-disabled": {
81
- backgroundColor: o(r.variant, n[800]),
82
- color: n[900],
83
- borderColor: r.variant === "outlined" ? n[900] : "transparent"
82
+ backgroundColor: a(r.variant, i[800]),
83
+ color: i[900],
84
+ borderColor: r.variant === "outlined" ? i[900] : "transparent"
84
85
  }
85
86
  })
86
87
  }
@@ -90,20 +91,20 @@ const o = (a, r) => a === "text" || a === "outlined" ? "transparent" : r, l = (a
90
91
  color: "success"
91
92
  },
92
93
  style: {
93
- ...a.applyStyles("dark", {
94
- backgroundColor: o(r.variant, d[800]),
95
- color: l(r.variant, d[50], d[500]),
96
- borderColor: r.variant === "outlined" ? d[500] : "transparent",
94
+ ...o.applyStyles("dark", {
95
+ backgroundColor: a(r.variant, n[800]),
96
+ color: l(r.variant, n[50], n[500]),
97
+ borderColor: r.variant === "outlined" ? n[500] : "transparent",
97
98
  "&:hover": {
98
- backgroundColor: o(r.variant, d[900]),
99
- color: l(r.variant, d[100], d[400]),
100
- borderColor: r.variant === "outlined" ? d[400] : "transparent"
99
+ backgroundColor: a(r.variant, n[900]),
100
+ color: l(r.variant, n[100], n[400]),
101
+ borderColor: r.variant === "outlined" ? n[400] : "transparent"
101
102
  },
102
103
  "&:active": { filter: "brightness(1.1)" },
103
104
  "&.Mui-disabled": {
104
- backgroundColor: o(r.variant, d[800]),
105
- color: d[900],
106
- borderColor: r.variant === "outlined" ? d[900] : "transparent"
105
+ backgroundColor: a(r.variant, n[800]),
106
+ color: n[900],
107
+ borderColor: r.variant === "outlined" ? n[900] : "transparent"
107
108
  }
108
109
  })
109
110
  }
@@ -113,18 +114,18 @@ const o = (a, r) => a === "text" || a === "outlined" ? "transparent" : r, l = (a
113
114
  color: "error"
114
115
  },
115
116
  style: {
116
- ...a.applyStyles("dark", {
117
- backgroundColor: o(r.variant, s[800]),
117
+ ...o.applyStyles("dark", {
118
+ backgroundColor: a(r.variant, s[800]),
118
119
  color: l(r.variant, s[50], s[500]),
119
120
  borderColor: r.variant === "outlined" ? s[500] : "transparent",
120
121
  "&:hover": {
121
- backgroundColor: o(r.variant, s[900]),
122
+ backgroundColor: a(r.variant, s[900]),
122
123
  color: l(r.variant, s[100], s[400]),
123
124
  borderColor: r.variant === "outlined" ? s[400] : "transparent"
124
125
  },
125
126
  "&:active": { filter: "brightness(1.1)" },
126
127
  "&.Mui-disabled": {
127
- backgroundColor: o(r.variant, s[800]),
128
+ backgroundColor: a(r.variant, s[800]),
128
129
  color: s[900],
129
130
  borderColor: r.variant === "outlined" ? s[900] : "transparent"
130
131
  }
@@ -136,20 +137,20 @@ const o = (a, r) => a === "text" || a === "outlined" ? "transparent" : r, l = (a
136
137
  color: "info"
137
138
  },
138
139
  style: {
139
- ...a.applyStyles("dark", {
140
- backgroundColor: o(r.variant, t[800]),
141
- color: l(r.variant, t[50], t[500]),
142
- borderColor: r.variant === "outlined" ? t[500] : "transparent",
140
+ ...o.applyStyles("dark", {
141
+ backgroundColor: a(r.variant, d[800]),
142
+ color: l(r.variant, d[50], d[500]),
143
+ borderColor: r.variant === "outlined" ? d[500] : "transparent",
143
144
  "&:hover": {
144
- backgroundColor: o(r.variant, t[900]),
145
- color: l(r.variant, t[100], t[400]),
146
- borderColor: r.variant === "outlined" ? t[400] : "transparent"
145
+ backgroundColor: a(r.variant, d[900]),
146
+ color: l(r.variant, d[100], d[400]),
147
+ borderColor: r.variant === "outlined" ? d[400] : "transparent"
147
148
  },
148
149
  "&:active": { filter: "brightness(1.1)" },
149
150
  "&.Mui-disabled": {
150
- backgroundColor: o(r.variant, t[800]),
151
- color: t[900],
152
- borderColor: r.variant === "outlined" ? t[900] : "transparent"
151
+ backgroundColor: a(r.variant, d[800]),
152
+ color: d[900],
153
+ borderColor: r.variant === "outlined" ? d[900] : "transparent"
153
154
  }
154
155
  })
155
156
  }
@@ -159,20 +160,20 @@ const o = (a, r) => a === "text" || a === "outlined" ? "transparent" : r, l = (a
159
160
  color: "warning"
160
161
  },
161
162
  style: {
162
- ...a.applyStyles("dark", {
163
- backgroundColor: o(r.variant, u[800]),
164
- color: l(r.variant, u[50], u[500]),
165
- borderColor: r.variant === "outlined" ? u[500] : "transparent",
163
+ ...o.applyStyles("dark", {
164
+ backgroundColor: a(r.variant, t[800]),
165
+ color: l(r.variant, t[50], t[500]),
166
+ borderColor: r.variant === "outlined" ? t[500] : "transparent",
166
167
  "&:hover": {
167
- backgroundColor: o(r.variant, u[900]),
168
- color: l(r.variant, u[100], u[400]),
169
- borderColor: r.variant === "outlined" ? u[400] : "transparent"
168
+ backgroundColor: a(r.variant, t[900]),
169
+ color: l(r.variant, t[100], t[400]),
170
+ borderColor: r.variant === "outlined" ? t[400] : "transparent"
170
171
  },
171
172
  "&:active": { filter: "brightness(1.1)" },
172
173
  "&.Mui-disabled": {
173
- backgroundColor: o(r.variant, u[800]),
174
- color: u[900],
175
- borderColor: r.variant === "outlined" ? u[900] : "transparent"
174
+ backgroundColor: a(r.variant, t[800]),
175
+ color: t[900],
176
+ borderColor: r.variant === "outlined" ? t[900] : "transparent"
176
177
  }
177
178
  })
178
179
  }
@@ -182,5 +183,5 @@ const o = (a, r) => a === "text" || a === "outlined" ? "transparent" : r, l = (a
182
183
  }
183
184
  };
184
185
  export {
185
- c as MuiButton
186
+ b as MuiButton
186
187
  };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org"
5
5
  },
6
- "version": "1.0.80",
6
+ "version": "1.0.81",
7
7
  "description": "advanced ui kit for solostylist",
8
8
  "private": false,
9
9
  "type": "module",