@spesia/ui 1.10.7 → 1.10.8

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 (3) hide show
  1. package/dist/components/date-picker/PeriodPicker/PeriodPicker.js +3 -2
  2. package/dist/styles/tab/tab.js +87 -40
  3. package/package.json +1 -1
package/dist/components/date-picker/PeriodPicker/PeriodPicker.js CHANGED
@@ -185,7 +185,7 @@ const De = ({
185
185
  padding: 2,
186
186
  display: "flex",
187
187
  flexDirection: a ? "row" : "column",
188
- gap: 4,
188
+ gap: 2,
189
189
  ".MuiChip-icon": {
190
190
  fill: (e) => {
191
191
  var r;
@@ -210,7 +210,8 @@ const De = ({
210
210
  le,
211
211
  {
212
212
  sx: {
213
- px: 3,
213
+ px: 2,
214
+ py: 4.5,
214
215
  backgroundColor: (n) => {
215
216
  var h;
216
217
  return e.label === (l == null ? void 0 : l.label) ? (h = n.vars) == null ? void 0 : h.palette.background.default : "transparent";
package/dist/styles/tab/tab.js CHANGED
@@ -1,25 +1,48 @@
1
- import { colors as n } from "../colors.js";
1
+ import { colors as i } from "../colors.js";
2
2
  const d = {
3
3
  MuiTab: {
4
4
  styleOverrides: {
5
5
  root: ({ theme: t }) => {
6
- var a, o, r, i;
6
+ var a, r, o, e;
7
7
  return {
8
- color: t.vars.palette.text.primary,
9
- borderRadius: 0,
10
- padding: 0,
11
- paddingTop: 12,
12
- marginRight: t.spacing(6),
13
- textTransform: "initial",
14
- display: "flex",
15
- alignItems: "center",
16
- flexDirection: "row",
17
- gap: 20,
18
- justifyContent: "flex-start",
19
- opacity: 0.2,
20
- "&.Mui-selected": {
8
+ ".MuiTabs-brand &": {
21
9
  color: t.vars.palette.text.primary,
22
- opacity: 1
10
+ borderRadius: 0,
11
+ padding: 0,
12
+ paddingTop: 12,
13
+ marginRight: t.spacing(6),
14
+ textTransform: "initial",
15
+ display: "flex",
16
+ alignItems: "center",
17
+ flexDirection: "row",
18
+ gap: 20,
19
+ justifyContent: "flex-start",
20
+ opacity: 0.2,
21
+ "&.Mui-selected": {
22
+ color: t.vars.palette.text.primary,
23
+ opacity: 1
24
+ }
25
+ },
26
+ ".MuiTabs-stretched &": {
27
+ color: t.vars.palette.text.secondary,
28
+ borderRadius: 0,
29
+ textTransform: "initial",
30
+ display: "flex",
31
+ textAlign: "center",
32
+ maxWidth: "none",
33
+ alignItems: "center",
34
+ flexDirection: "row",
35
+ gap: 20,
36
+ flexGrow: 1,
37
+ justifyContent: "flex-start",
38
+ borderBottom: `2px solid ${t.vars.palette.divider}`,
39
+ "&.Mui-selected": {
40
+ color: t.vars.palette.text.primary
41
+ },
42
+ "& span": {
43
+ display: "block",
44
+ flex: "1 1 auto"
45
+ }
23
46
  },
24
47
  ".MuiTabs-numbered &": {
25
48
  "&::before": {
@@ -49,7 +72,7 @@ const d = {
49
72
  opacity: 1,
50
73
  "&.Mui-selected": {
51
74
  background: (a = t.vars) == null ? void 0 : a.palette.background.brownBold,
52
- color: (o = t.vars) == null ? void 0 : o.palette.text.contrastText
75
+ color: (r = t.vars) == null ? void 0 : r.palette.text.contrastText
53
76
  },
54
77
  "@media (max-width: 599px)": {
55
78
  padding: 12,
@@ -73,8 +96,8 @@ const d = {
73
96
  borderRadius: t.spacing(8),
74
97
  opacity: 1,
75
98
  "&.Mui-selected": {
76
- color: (r = t.vars) == null ? void 0 : r.palette.background.brownBold,
77
- background: (i = t.vars) == null ? void 0 : i.palette.text.contrastText
99
+ color: (o = t.vars) == null ? void 0 : o.palette.background.brownBold,
100
+ background: (e = t.vars) == null ? void 0 : e.palette.text.contrastText
78
101
  },
79
102
  "@media (max-width: 599px)": {
80
103
  padding: 12,
@@ -89,22 +112,38 @@ const d = {
89
112
  }, s = {
90
113
  MuiTabs: {
91
114
  styleOverrides: {
92
- root: () => ({}),
115
+ root: () => ({
116
+ "&.MuiTabs-stretched": {
117
+ width: "100%",
118
+ margin: 0
119
+ }
120
+ }),
93
121
  scroller: () => ({
94
122
  ".MuiTabs-rounded &": {
95
123
  display: "flex",
96
124
  width: "auto"
125
+ },
126
+ ".MuiTabs-stretched &": {
127
+ display: "flex",
128
+ width: "100%"
97
129
  }
98
130
  }),
99
131
  list: ({ theme: t }) => {
100
- var a, o, r;
132
+ var a, r, o;
101
133
  return {
102
134
  counterReset: "MuiTab-root",
135
+ ".MuiTabs-stretched &": {
136
+ display: "flex",
137
+ width: "100%",
138
+ alignItems: "center",
139
+ justifyContent: "space-between",
140
+ gap: 0
141
+ },
103
142
  ".MuiTabs-buttons &": {
104
143
  backgroundColor: (a = t.vars) == null ? void 0 : a.palette.background.paper,
105
144
  borderRadius: t.spacing(2),
106
145
  border: "1px solid",
107
- borderColor: (o = t == null ? void 0 : t.vars) == null ? void 0 : o.palette.border.primary,
146
+ borderColor: (r = t == null ? void 0 : t.vars) == null ? void 0 : r.palette.border.primary,
108
147
  display: "flex",
109
148
  alignItems: "center",
110
149
  justifyContent: "flex-start",
@@ -112,10 +151,11 @@ const d = {
112
151
  padding: 4
113
152
  },
114
153
  ".MuiTabs-rounded &": {
115
- backgroundColor: (r = t.vars) == null ? void 0 : r.palette.background.alphaBrown,
154
+ backgroundColor: (o = t.vars) == null ? void 0 : o.palette.background.alphaBrown,
116
155
  borderRadius: t.spacing(8),
117
156
  border: "0px solid",
118
157
  display: "flex",
158
+ width: "auto",
119
159
  alignItems: "center",
120
160
  justifyContent: "flex-start",
121
161
  gap: 0,
@@ -124,24 +164,31 @@ const d = {
124
164
  };
125
165
  },
126
166
  indicator: (t) => ({
127
- backgroundColor: n.primary.beige[10],
128
- height: "5px",
129
- top: 0,
130
- bottom: "auto",
131
- borderRadius: t.theme.spacing(2),
132
- "&:after": {
133
- content: '""',
134
- position: "absolute",
135
- left: 0,
136
- right: "auto",
167
+ ".MuiTabs-brand &": {
168
+ backgroundColor: i.primary.beige[10],
169
+ height: "5px",
137
170
  top: 0,
138
- bottom: 0,
139
- margin: "auto",
140
- width: "var(--indicator-width, 100%)",
141
- height: "100%",
142
- borderRadius: t.theme.spacing(3),
143
- backgroundColor: n.primary.coral[100],
144
- transition: "width 0.3s ease"
171
+ bottom: "auto",
172
+ borderRadius: t.theme.spacing(2),
173
+ "&:after": {
174
+ content: '""',
175
+ position: "absolute",
176
+ left: 0,
177
+ right: "auto",
178
+ top: 0,
179
+ bottom: 0,
180
+ margin: "auto",
181
+ width: "var(--indicator-width, 100%)",
182
+ height: "100%",
183
+ borderRadius: t.theme.spacing(3),
184
+ backgroundColor: i.primary.coral[100],
185
+ transition: "width 0.3s ease"
186
+ }
187
+ },
188
+ ".MuiTabs-stretched &": {
189
+ backgroundColor: i.primary.brown[50],
190
+ height: "2px",
191
+ borderRadius: t.theme.spacing(2)
145
192
  },
146
193
  ".MuiTabs-buttons &": {
147
194
  display: "none"
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "1.10.7",
6
+ "version": "1.10.8",
7
7
  "description": "The Spesia UI toolkit for React",
8
8
  "files": [
9
9
  "dist"