meticulous-ui 3.8.1 → 3.8.3

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/cjs/components/Switch/Switch.cjs +87 -25
  2. package/components/Switch/Switch.js +155 -75
  3. package/package.json +1 -1
package/cjs/components/Switch/Switch.cjs CHANGED
@@ -1,22 +1,21 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),A=require("react"),B=require("styled-components"),H=require("prop-types"),$=require("../../colors/grey.cjs"),x=require("../../colors/green.cjs"),_=e=>e&&e.__esModule?e:{default:e},c=_(B),t=_(H),n=1.9,i=.28,w=n+i*2,I=.7,k=i+n,S=c.default.button`
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),f=require("react"),x=require("styled-components"),G=require("prop-types"),b=require("../../colors/grey.cjs"),R=require("../../colors/green.cjs"),m=require("../../colors/white.cjs"),B=e=>e&&e.__esModule?e:{default:e},h=B(x),t=B(G),g=1.9,l=.28,i=g+l*2,K=.7,y=l+g,N=h.default.button`
2
2
  position: relative;
3
3
  isolation: isolate;
4
- height: ${w}rem;
4
+ height: ${i}rem;
5
5
  width: ${({$hasLabel:e})=>e?"max-content":"4.8rem"};
6
6
  min-width: 4.8rem;
7
7
  max-width: 20rem;
8
- border-radius: ${w/2}rem;
9
- border: 1.5px solid rgba(0, 0, 0, 0.08);
8
+ border-radius: ${i/2}rem;
9
+ border: 0.094rem solid rgba(0, 0, 0, 0.08);
10
10
  display: flex;
11
11
  align-items: center;
12
12
  box-sizing: border-box;
13
13
  flex-shrink: 0;
14
- overflow: hidden;
15
- cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
14
+ cursor: ${({$disabled:e})=>e?"not-allowed":"pointer"};
16
15
  outline: none;
17
16
 
18
- padding-left: ${({$checked:e,$hasLabel:r})=>r?e?`${i}rem`:`${k}rem`:"0"};
19
- padding-right: ${({$checked:e,$hasLabel:r})=>r?e?`${k}rem`:`${i}rem`:"0"};
17
+ padding-left: ${({$checked:e,$hasLabel:r})=>r?e?`${l}rem`:`${y}rem`:"0"};
18
+ padding-right: ${({$checked:e,$hasLabel:r})=>r?e?`${y}rem`:`${l}rem`:"0"};
20
19
 
21
20
  transition:
22
21
  background-color 0.3s ease,
@@ -24,28 +23,77 @@
24
23
  padding-left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
25
24
  padding-right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
26
25
 
27
- background-color: ${({$checked:e,$onColor:r,$offColor:l,disabled:s})=>s?$.default.m300:e?r||x.default.m500:l||$.default.m400};
26
+ background-color: ${({$checked:e,$onColor:r,$offColor:a,$disabled:d})=>d?b.default.m300:e?r||R.default.m500:a||b.default.m400};
28
27
 
29
28
  &:focus-visible {
30
- outline: 3px solid ${({$onColor:e})=>e?`${e}88`:`${x.default.m500}88`};
31
- outline-offset: 2px;
29
+ outline: 0.188rem solid ${({$onColor:e})=>e?`${e}88`:`${R.default.m500}88`};
30
+ outline-offset: 0.125rem;
32
31
  }
33
- `,U=c.default.div`
32
+ `,X=h.default.div`
34
33
  position: absolute;
35
- top: calc(50% - ${n/2}rem);
36
- left: ${({$checked:e})=>e?`calc(100% - ${n+i}rem)`:`${i}rem`};
37
- width: ${n}rem;
38
- height: ${n}rem;
39
- border-radius: 50%;
40
- background: white;
34
+ top: 50%;
35
+ transform: translateY(-50%);
36
+ border-radius: 45%;
41
37
  display: flex;
42
38
  align-items: center;
43
39
  justify-content: center;
44
- flex-shrink: 0;
45
- transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
46
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
47
- z-index: 1;
48
- `,E=c.default.span`
40
+ transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
41
+ z-index: 10;
42
+
43
+ ${({$isGlass:e,$checked:r})=>e?x.css`
44
+ width: ${i*1.55}rem;
45
+ height: ${i*1.9}rem;
46
+ left: -0.75rem;
47
+ transform: translateY(-50%) translateX(${r?"var(--glass-travel, 0rem)":"0"});
48
+ transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
49
+ will-change: transform;
50
+
51
+ /* transparent center, rim-only glass */
52
+ background: radial-gradient(
53
+ circle at 50% 50%,
54
+ rgba(0, 0, 0, 0) 0%,
55
+ rgba(0, 0, 0, 0) 55%,
56
+ rgba(255, 255, 255, 0.04) 80%,
57
+ rgba(255, 255, 255, 0.1) 100%
58
+ );
59
+
60
+ border: 0.094rem solid rgba(255, 255, 255, 0.28);
61
+
62
+ box-shadow:
63
+ 0 0.25rem 1rem rgba(0, 0, 0, 0.35),
64
+ 0 0 0 0.125rem rgba(255, 255, 255, 0.06),
65
+ inset 0 0.0625rem 0.125rem rgba(255, 255, 255, 0.2),
66
+ inset 0 -0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
67
+
68
+ /* subtle top specular rim */
69
+ &::before {
70
+ content: '';
71
+ position: absolute;
72
+ top: 6%;
73
+ left: 15%;
74
+ width: 40%;
75
+ height: 18%;
76
+ background: radial-gradient(
77
+ circle,
78
+ rgba(255, 255, 255, 0.35) 0%,
79
+ rgba(255, 255, 255, 0) 80%
80
+ );
81
+ border-radius: 50%;
82
+ transform: rotate(-10deg);
83
+ filter: blur(0.0625rem);
84
+ }
85
+
86
+ &::after {
87
+ display: none;
88
+ }
89
+ `:x.css`
90
+ width: ${g}rem;
91
+ height: ${g}rem;
92
+ left: ${r?`calc(100% - ${y}rem)`:`${l}rem`};
93
+ background: ${m.default};
94
+ box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
95
+ `}
96
+ `,Z=h.default.span`
49
97
  position: relative;
50
98
  z-index: 2;
51
99
  font-size: 0.9rem;
@@ -57,6 +105,20 @@
57
105
  text-overflow: ellipsis;
58
106
  user-select: none;
59
107
  pointer-events: none;
60
- padding: 0 ${I}rem;
108
+ padding: ${({$isGlass:e,$checked:r})=>e?r?"0 1.6rem 0 0.6rem":"0 0.6rem 0 1.6rem":`0 ${K}rem`};
61
109
  color: rgba(255, 255, 255, 0.95);
62
- `,v=({checked:e,defaultChecked:r=!1,onChange:l,onIcon:s,offIcon:u,onColor:y,offColor:T,onLabel:f,offLabel:b,label:z,id:j,disabled:a=!1})=>{const[q,L]=A.useState(r),p=e!==void 0,o=p?e:q,M=P=>{if(P.preventDefault(),a)return;const g=!o;p||L(g),l==null||l(g)},C=s!=null||u!=null,h=f!=null||b!=null,D=o?s:u,m=o?f:b;return d.jsxs(S,{id:j,type:"button",role:"switch","aria-checked":o,"aria-label":z,"aria-disabled":a,onClick:M,disabled:a,$checked:o,$onColor:y,$offColor:T,$hasLabel:h,children:[d.jsx(U,{"aria-hidden":"true",$checked:o,children:C&&D}),h&&m&&d.jsx(E,{children:m})]})};v.propTypes={checked:t.default.bool,defaultChecked:t.default.bool,onChange:t.default.func,onIcon:t.default.node,offIcon:t.default.node,onColor:t.default.string,offColor:t.default.string,onLabel:t.default.string,offLabel:t.default.string,label:t.default.string,id:t.default.string,disabled:t.default.bool};exports.default=v;
110
+ `,J=h.default.span`
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: center;
114
+
115
+ svg path {
116
+ stroke-width: 2.5;
117
+ }
118
+
119
+ filter: drop-shadow(0 0 0.25rem ${({$color:e})=>e||m.default})
120
+ drop-shadow(0 0 0.625rem ${({$color:e})=>e||m.default})
121
+ drop-shadow(0 0 1.25rem ${({$color:e})=>e||m.default})
122
+ drop-shadow(0 0 2.5rem ${({$color:e})=>e?`${e}99`:`${b.default.m100}99`})
123
+ drop-shadow(0 0 3.75rem ${({$color:e})=>e?`${e}4D`:`${b.default.m200}4D`});
124
+ `,C=({checked:e,defaultChecked:r=!1,onChange:a,onIcon:d,offIcon:k,onColor:_,offColor:T,onLabel:z,offLabel:j,label:I,id:P,disabled:p=!1,isGlass:o,...$})=>{const[A,E]=f.useState(r),q=e!==void 0,n=q?e:A,w=f.useRef(null),[D,H]=f.useState(null);f.useEffect(()=>{if(!o||!w.current)return;const c=w.current,s=()=>{const U=parseFloat(getComputedStyle(document.documentElement).fontSize),Y=c.getBoundingClientRect().width/U-(i*1.2+.1-.75);H(`${Y.toFixed(4)}rem`)};s();const M=new ResizeObserver(s);return M.observe(c),()=>M.disconnect()},[o]);const F=c=>{if(c.preventDefault(),p)return;const s=!n;q||E(s),a==null||a(s)},O=d!=null||k!=null,S=z!=null||j!=null,L=n?d:k,v=n?z:j;return u.jsxs(N,{...$,ref:w,id:P,type:"button",role:"switch","aria-checked":n,"aria-label":I||v||void 0,"aria-disabled":p||void 0,onClick:F,$checked:n,$disabled:p,$onColor:_,$offColor:T,$hasLabel:S,style:D!=null?{...$.style,"--glass-travel":D}:$.style,children:[u.jsx(X,{"aria-hidden":"true",$checked:n,$isGlass:o,children:o?u.jsx(J,{$color:n?_:T,children:L}):O&&L}),S&&v&&u.jsx(Z,{$isGlass:o,$checked:n,"aria-live":"polite","aria-atomic":"true",children:v})]})};C.propTypes={checked:t.default.bool,defaultChecked:t.default.bool,onChange:t.default.func,onIcon:t.default.node,offIcon:t.default.node,onColor:t.default.string,offColor:t.default.string,onLabel:t.default.string,offLabel:t.default.string,label:t.default.string,id:t.default.string,disabled:t.default.bool,isGlass:t.default.bool};exports.default=C;
package/components/Switch/Switch.js CHANGED
@@ -1,28 +1,28 @@
1
- import { jsxs as H, jsx as g } from "react/jsx-runtime";
2
- import { useState as I } from "react";
3
- import a from "styled-components";
4
- import o from "prop-types";
5
- import $ from "../../colors/grey.js";
6
- import x from "../../colors/green.js";
7
- const n = 1.9, i = 0.28, w = n + i * 2, j = 0.7, k = i + n, M = a.button`
1
+ import { jsxs as Y, jsx as w } from "react/jsx-runtime";
2
+ import { useState as R, useRef as G, useEffect as K } from "react";
3
+ import g, { css as _ } from "styled-components";
4
+ import r from "prop-types";
5
+ import b from "../../colors/grey.js";
6
+ import j from "../../colors/green.js";
7
+ import m from "../../colors/white.js";
8
+ const u = 1.9, a = 0.28, l = u + a * 2, N = 0.7, v = a + u, X = g.button`
8
9
  position: relative;
9
10
  isolation: isolate;
10
- height: ${w}rem;
11
+ height: ${l}rem;
11
12
  width: ${({ $hasLabel: e }) => e ? "max-content" : "4.8rem"};
12
13
  min-width: 4.8rem;
13
14
  max-width: 20rem;
14
- border-radius: ${w / 2}rem;
15
- border: 1.5px solid rgba(0, 0, 0, 0.08);
15
+ border-radius: ${l / 2}rem;
16
+ border: 0.094rem solid rgba(0, 0, 0, 0.08);
16
17
  display: flex;
17
18
  align-items: center;
18
19
  box-sizing: border-box;
19
20
  flex-shrink: 0;
20
- overflow: hidden;
21
- cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
21
+ cursor: ${({ $disabled: e }) => e ? "not-allowed" : "pointer"};
22
22
  outline: none;
23
23
 
24
- padding-left: ${({ $checked: e, $hasLabel: r }) => r ? e ? `${i}rem` : `${k}rem` : "0"};
25
- padding-right: ${({ $checked: e, $hasLabel: r }) => r ? e ? `${k}rem` : `${i}rem` : "0"};
24
+ padding-left: ${({ $checked: e, $hasLabel: t }) => t ? e ? `${a}rem` : `${v}rem` : "0"};
25
+ padding-right: ${({ $checked: e, $hasLabel: t }) => t ? e ? `${v}rem` : `${a}rem` : "0"};
26
26
 
27
27
  transition:
28
28
  background-color 0.3s ease,
@@ -30,28 +30,77 @@ const n = 1.9, i = 0.28, w = n + i * 2, j = 0.7, k = i + n, M = a.button`
30
30
  padding-left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
31
31
  padding-right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
32
32
 
33
- background-color: ${({ $checked: e, $onColor: r, $offColor: s, disabled: l }) => l ? $.m300 : e ? r || x.m500 : s || $.m400};
33
+ background-color: ${({ $checked: e, $onColor: t, $offColor: n, $disabled: c }) => c ? b.m300 : e ? t || j.m500 : n || b.m400};
34
34
 
35
35
  &:focus-visible {
36
- outline: 3px solid ${({ $onColor: e }) => e ? `${e}88` : `${x.m500}88`};
37
- outline-offset: 2px;
36
+ outline: 0.188rem solid ${({ $onColor: e }) => e ? `${e}88` : `${j.m500}88`};
37
+ outline-offset: 0.125rem;
38
38
  }
39
- `, P = a.div`
39
+ `, Z = g.div`
40
40
  position: absolute;
41
- top: calc(50% - ${n / 2}rem);
42
- left: ${({ $checked: e }) => e ? `calc(100% - ${n + i}rem)` : `${i}rem`};
43
- width: ${n}rem;
44
- height: ${n}rem;
45
- border-radius: 50%;
46
- background: white;
41
+ top: 50%;
42
+ transform: translateY(-50%);
43
+ border-radius: 45%;
47
44
  display: flex;
48
45
  align-items: center;
49
46
  justify-content: center;
50
- flex-shrink: 0;
51
- transition: left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
52
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
53
- z-index: 1;
54
- `, U = a.span`
47
+ transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
48
+ z-index: 10;
49
+
50
+ ${({ $isGlass: e, $checked: t }) => e ? _`
51
+ width: ${l * 1.55}rem;
52
+ height: ${l * 1.9}rem;
53
+ left: -0.75rem;
54
+ transform: translateY(-50%) translateX(${t ? "var(--glass-travel, 0rem)" : "0"});
55
+ transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
56
+ will-change: transform;
57
+
58
+ /* transparent center, rim-only glass */
59
+ background: radial-gradient(
60
+ circle at 50% 50%,
61
+ rgba(0, 0, 0, 0) 0%,
62
+ rgba(0, 0, 0, 0) 55%,
63
+ rgba(255, 255, 255, 0.04) 80%,
64
+ rgba(255, 255, 255, 0.1) 100%
65
+ );
66
+
67
+ border: 0.094rem solid rgba(255, 255, 255, 0.28);
68
+
69
+ box-shadow:
70
+ 0 0.25rem 1rem rgba(0, 0, 0, 0.35),
71
+ 0 0 0 0.125rem rgba(255, 255, 255, 0.06),
72
+ inset 0 0.0625rem 0.125rem rgba(255, 255, 255, 0.2),
73
+ inset 0 -0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
74
+
75
+ /* subtle top specular rim */
76
+ &::before {
77
+ content: '';
78
+ position: absolute;
79
+ top: 6%;
80
+ left: 15%;
81
+ width: 40%;
82
+ height: 18%;
83
+ background: radial-gradient(
84
+ circle,
85
+ rgba(255, 255, 255, 0.35) 0%,
86
+ rgba(255, 255, 255, 0) 80%
87
+ );
88
+ border-radius: 50%;
89
+ transform: rotate(-10deg);
90
+ filter: blur(0.0625rem);
91
+ }
92
+
93
+ &::after {
94
+ display: none;
95
+ }
96
+ ` : _`
97
+ width: ${u}rem;
98
+ height: ${u}rem;
99
+ left: ${t ? `calc(100% - ${v}rem)` : `${a}rem`};
100
+ background: ${m};
101
+ box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
102
+ `}
103
+ `, q = g.span`
55
104
  position: relative;
56
105
  z-index: 2;
57
106
  font-size: 0.9rem;
@@ -63,63 +112,94 @@ const n = 1.9, i = 0.28, w = n + i * 2, j = 0.7, k = i + n, M = a.button`
63
112
  text-overflow: ellipsis;
64
113
  user-select: none;
65
114
  pointer-events: none;
66
- padding: 0 ${j}rem;
115
+ padding: ${({ $isGlass: e, $checked: t }) => e ? t ? "0 1.6rem 0 0.6rem" : "0 0.6rem 0 1.6rem" : `0 ${N}rem`};
67
116
  color: rgba(255, 255, 255, 0.95);
68
- `, E = ({
117
+ `, J = g.span`
118
+ display: flex;
119
+ align-items: center;
120
+ justify-content: center;
121
+
122
+ svg path {
123
+ stroke-width: 2.5;
124
+ }
125
+
126
+ filter: drop-shadow(0 0 0.25rem ${({ $color: e }) => e || m})
127
+ drop-shadow(0 0 0.625rem ${({ $color: e }) => e || m})
128
+ drop-shadow(0 0 1.25rem ${({ $color: e }) => e || m})
129
+ drop-shadow(0 0 2.5rem ${({ $color: e }) => e ? `${e}99` : `${b.m100}99`})
130
+ drop-shadow(0 0 3.75rem ${({ $color: e }) => e ? `${e}4D` : `${b.m200}4D`});
131
+ `, Q = ({
69
132
  checked: e,
70
- defaultChecked: r = !1,
71
- onChange: s,
72
- onIcon: l,
73
- offIcon: d,
74
- onColor: v,
75
- offColor: T,
76
- onLabel: m,
77
- offLabel: p,
78
- label: y,
79
- id: z,
80
- disabled: c = !1
133
+ defaultChecked: t = !1,
134
+ onChange: n,
135
+ onIcon: c,
136
+ offIcon: x,
137
+ onColor: k,
138
+ offColor: y,
139
+ onLabel: T,
140
+ offLabel: z,
141
+ label: A,
142
+ id: E,
143
+ disabled: f = !1,
144
+ isGlass: s,
145
+ ...p
81
146
  }) => {
82
- const [L, C] = I(r), f = e !== void 0, t = f ? e : L, _ = (D) => {
83
- if (D.preventDefault(), c) return;
84
- const b = !t;
85
- f || C(b), s == null || s(b);
86
- }, A = l != null || d != null, u = m != null || p != null, B = t ? l : d, h = t ? m : p;
87
- return /* @__PURE__ */ H(
88
- M,
147
+ const [H, S] = R(t), D = e !== void 0, o = D ? e : H, h = G(null), [L, F] = R(null);
148
+ K(() => {
149
+ if (!s || !h.current) return;
150
+ const d = h.current, i = () => {
151
+ const U = parseFloat(getComputedStyle(document.documentElement).fontSize), O = d.getBoundingClientRect().width / U - (l * 1.2 + 0.1 - 0.75);
152
+ F(`${O.toFixed(4)}rem`);
153
+ };
154
+ i();
155
+ const I = new ResizeObserver(i);
156
+ return I.observe(d), () => I.disconnect();
157
+ }, [s]);
158
+ const M = (d) => {
159
+ if (d.preventDefault(), f) return;
160
+ const i = !o;
161
+ D || S(i), n == null || n(i);
162
+ }, P = c != null || x != null, B = T != null || z != null, C = o ? c : x, $ = o ? T : z;
163
+ return /* @__PURE__ */ Y(
164
+ X,
89
165
  {
90
- id: z,
166
+ ...p,
167
+ ref: h,
168
+ id: E,
91
169
  type: "button",
92
170
  role: "switch",
93
- "aria-checked": t,
94
- "aria-label": y,
95
- "aria-disabled": c,
96
- onClick: _,
97
- disabled: c,
98
- $checked: t,
99
- $onColor: v,
100
- $offColor: T,
101
- $hasLabel: u,
171
+ "aria-checked": o,
172
+ "aria-label": A || $ || void 0,
173
+ "aria-disabled": f || void 0,
174
+ onClick: M,
175
+ $checked: o,
176
+ $disabled: f,
177
+ $onColor: k,
178
+ $offColor: y,
179
+ $hasLabel: B,
180
+ style: L != null ? { ...p.style, "--glass-travel": L } : p.style,
102
181
  children: [
103
- /* @__PURE__ */ g(P, { "aria-hidden": "true", $checked: t, children: A && B }),
104
- u && h && /* @__PURE__ */ g(U, { children: h })
182
+ /* @__PURE__ */ w(Z, { "aria-hidden": "true", $checked: o, $isGlass: s, children: s ? /* @__PURE__ */ w(J, { $color: o ? k : y, children: C }) : P && C }),
183
+ B && $ && /* @__PURE__ */ w(q, { $isGlass: s, $checked: o, "aria-live": "polite", "aria-atomic": "true", children: $ })
105
184
  ]
106
185
  }
107
186
  );
108
187
  };
109
- E.propTypes = {
110
- checked: o.bool,
111
- defaultChecked: o.bool,
112
- onChange: o.func,
113
- onIcon: o.node,
114
- offIcon: o.node,
115
- onColor: o.string,
116
- offColor: o.string,
117
- onLabel: o.string,
118
- offLabel: o.string,
119
- label: o.string,
120
- id: o.string,
121
- disabled: o.bool
188
+ Q.propTypes = {
189
+ checked: r.bool,
190
+ defaultChecked: r.bool,
191
+ onChange: r.func,
192
+ onIcon: r.node,
193
+ offIcon: r.node,
194
+ onColor: r.string,
195
+ offColor: r.string,
196
+ onLabel: r.string,
197
+ offLabel: r.string,
198
+ label: r.string,
199
+ id: r.string,
200
+ disabled: r.bool,
201
+ isGlass: r.bool
122
202
  };
123
203
  export {
124
- E as default
204
+ Q as default
125
205
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "3.8.1",
3
+ "version": "3.8.3",
4
4
  "license": "ISC",
5
5
  "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
6
6
  "types": "./index.d.ts",