meticulous-ui 3.8.1 → 3.8.2

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 +84 -25
  2. package/components/Switch/Switch.js +139 -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 l=require("react/jsx-runtime"),C=require("react"),h=require("styled-components"),U=require("prop-types"),c=require("../../colors/grey.cjs"),q=require("../../colors/green.cjs"),d=require("../../colors/white.cjs"),z=e=>e&&e.__esModule?e:{default:e},f=z(h),t=z(U),u=1.9,s=.28,n=u+s*2,E=.7,p=s+u,G=f.default.button`
2
2
  position: relative;
3
3
  isolation: isolate;
4
- height: ${w}rem;
4
+ height: ${n}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: ${n/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?`${s}rem`:`${p}rem`:"0"};
18
+ padding-right: ${({$checked:e,$hasLabel:r})=>r?e?`${p}rem`:`${s}rem`:"0"};
20
19
 
21
20
  transition:
22
21
  background-color 0.3s ease,
@@ -24,28 +23,74 @@
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:o,$disabled:i})=>i?c.default.m300:e?r||q.default.m500:o||c.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`:`${q.default.m500}88`};
30
+ outline-offset: 0.125rem;
32
31
  }
33
- `,U=c.default.div`
32
+ `,O=f.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?h.css`
44
+ width: ${n*1.55}rem;
45
+ height: ${n*1.9}rem;
46
+ left: ${r?`calc(100% - ${n*1.2+.1}rem)`:"-0.75rem"};
47
+
48
+ /* transparent center, rim-only glass */
49
+ background: radial-gradient(
50
+ circle at 50% 50%,
51
+ rgba(0, 0, 0, 0) 0%,
52
+ rgba(0, 0, 0, 0) 55%,
53
+ rgba(255, 255, 255, 0.04) 80%,
54
+ rgba(255, 255, 255, 0.1) 100%
55
+ );
56
+
57
+ border: 0.094rem solid rgba(255, 255, 255, 0.28);
58
+
59
+ box-shadow:
60
+ 0 0.25rem 1rem rgba(0, 0, 0, 0.35),
61
+ 0 0 0 0.125rem rgba(255, 255, 255, 0.06),
62
+ inset 0 0.0625rem 0.125rem rgba(255, 255, 255, 0.2),
63
+ inset 0 -0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
64
+
65
+ /* subtle top specular rim */
66
+ &::before {
67
+ content: '';
68
+ position: absolute;
69
+ top: 6%;
70
+ left: 15%;
71
+ width: 40%;
72
+ height: 18%;
73
+ background: radial-gradient(
74
+ circle,
75
+ rgba(255, 255, 255, 0.35) 0%,
76
+ rgba(255, 255, 255, 0) 80%
77
+ );
78
+ border-radius: 50%;
79
+ transform: rotate(-10deg);
80
+ filter: blur(0.0625rem);
81
+ }
82
+
83
+ &::after {
84
+ display: none;
85
+ }
86
+ `:h.css`
87
+ width: ${u}rem;
88
+ height: ${u}rem;
89
+ left: ${r?`calc(100% - ${p}rem)`:`${s}rem`};
90
+ background: ${d.default};
91
+ box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
92
+ `}
93
+ `,R=f.default.span`
49
94
  position: relative;
50
95
  z-index: 2;
51
96
  font-size: 0.9rem;
@@ -57,6 +102,20 @@
57
102
  text-overflow: ellipsis;
58
103
  user-select: none;
59
104
  pointer-events: none;
60
- padding: 0 ${I}rem;
105
+ padding: ${({$isGlass:e,$checked:r})=>e?r?"0 1.6rem 0 0.6rem":"0 0.6rem 0 1.6rem":`0 ${E}rem`};
61
106
  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;
107
+ `,K=f.default.span`
108
+ display: flex;
109
+ align-items: center;
110
+ justify-content: center;
111
+
112
+ svg path {
113
+ stroke-width: 2.5;
114
+ }
115
+
116
+ filter: drop-shadow(0 0 0.25rem ${({$color:e})=>e||d.default})
117
+ drop-shadow(0 0 0.625rem ${({$color:e})=>e||d.default})
118
+ drop-shadow(0 0 1.25rem ${({$color:e})=>e||d.default})
119
+ drop-shadow(0 0 2.5rem ${({$color:e})=>e?`${e}99`:`${c.default.m100}99`})
120
+ drop-shadow(0 0 3.75rem ${({$color:e})=>e?`${e}4D`:`${c.default.m200}4D`});
121
+ `,D=({checked:e,defaultChecked:r=!1,onChange:o,onIcon:i,offIcon:$,onColor:w,offColor:x,onLabel:k,offLabel:v,label:L,id:M,disabled:m=!1,isGlass:b,...I})=>{const[P,A]=C.useState(r),y=e!==void 0,a=y?e:P,B=S=>{if(S.preventDefault(),m)return;const j=!a;y||A(j),o==null||o(j)},H=i!=null||$!=null,_=k!=null||v!=null,T=a?i:$,g=a?k:v;return l.jsxs(G,{...I,id:M,type:"button",role:"switch","aria-checked":a,"aria-label":L||g||void 0,"aria-disabled":m||void 0,onClick:B,$checked:a,$disabled:m,$onColor:w,$offColor:x,$hasLabel:_,children:[l.jsx(O,{"aria-hidden":"true",$checked:a,$isGlass:b,children:b?l.jsx(K,{$color:a?w:x,children:T}):H&&T}),_&&g&&l.jsx(R,{$isGlass:b,$checked:a,"aria-live":"polite","aria-atomic":"true",children:g})]})};D.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=D;
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 P, jsx as h } from "react/jsx-runtime";
2
+ import { useState as U } from "react";
3
+ import m, { css as D } from "styled-components";
4
+ import r from "prop-types";
5
+ import d from "../../colors/grey.js";
6
+ import L from "../../colors/green.js";
7
+ import l from "../../colors/white.js";
8
+ const c = 1.9, s = 0.28, n = c + s * 2, E = 0.7, u = s + c, G = m.button`
8
9
  position: relative;
9
10
  isolation: isolate;
10
- height: ${w}rem;
11
+ height: ${n}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: ${n / 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 ? `${s}rem` : `${u}rem` : "0"};
25
+ padding-right: ${({ $checked: e, $hasLabel: t }) => t ? e ? `${u}rem` : `${s}rem` : "0"};
26
26
 
27
27
  transition:
28
28
  background-color 0.3s ease,
@@ -30,28 +30,74 @@ 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: i, $disabled: a }) => a ? d.m300 : e ? t || L.m500 : i || d.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` : `${L.m500}88`};
37
+ outline-offset: 0.125rem;
38
38
  }
39
- `, P = a.div`
39
+ `, S = m.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 ? D`
51
+ width: ${n * 1.55}rem;
52
+ height: ${n * 1.9}rem;
53
+ left: ${t ? `calc(100% - ${n * 1.2 + 0.1}rem)` : "-0.75rem"};
54
+
55
+ /* transparent center, rim-only glass */
56
+ background: radial-gradient(
57
+ circle at 50% 50%,
58
+ rgba(0, 0, 0, 0) 0%,
59
+ rgba(0, 0, 0, 0) 55%,
60
+ rgba(255, 255, 255, 0.04) 80%,
61
+ rgba(255, 255, 255, 0.1) 100%
62
+ );
63
+
64
+ border: 0.094rem solid rgba(255, 255, 255, 0.28);
65
+
66
+ box-shadow:
67
+ 0 0.25rem 1rem rgba(0, 0, 0, 0.35),
68
+ 0 0 0 0.125rem rgba(255, 255, 255, 0.06),
69
+ inset 0 0.0625rem 0.125rem rgba(255, 255, 255, 0.2),
70
+ inset 0 -0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
71
+
72
+ /* subtle top specular rim */
73
+ &::before {
74
+ content: '';
75
+ position: absolute;
76
+ top: 6%;
77
+ left: 15%;
78
+ width: 40%;
79
+ height: 18%;
80
+ background: radial-gradient(
81
+ circle,
82
+ rgba(255, 255, 255, 0.35) 0%,
83
+ rgba(255, 255, 255, 0) 80%
84
+ );
85
+ border-radius: 50%;
86
+ transform: rotate(-10deg);
87
+ filter: blur(0.0625rem);
88
+ }
89
+
90
+ &::after {
91
+ display: none;
92
+ }
93
+ ` : D`
94
+ width: ${c}rem;
95
+ height: ${c}rem;
96
+ left: ${t ? `calc(100% - ${u}rem)` : `${s}rem`};
97
+ background: ${l};
98
+ box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
99
+ `}
100
+ `, K = m.span`
55
101
  position: relative;
56
102
  z-index: 2;
57
103
  font-size: 0.9rem;
@@ -63,63 +109,81 @@ const n = 1.9, i = 0.28, w = n + i * 2, j = 0.7, k = i + n, M = a.button`
63
109
  text-overflow: ellipsis;
64
110
  user-select: none;
65
111
  pointer-events: none;
66
- padding: 0 ${j}rem;
112
+ padding: ${({ $isGlass: e, $checked: t }) => e ? t ? "0 1.6rem 0 0.6rem" : "0 0.6rem 0 1.6rem" : `0 ${E}rem`};
67
113
  color: rgba(255, 255, 255, 0.95);
68
- `, E = ({
114
+ `, N = m.span`
115
+ display: flex;
116
+ align-items: center;
117
+ justify-content: center;
118
+
119
+ svg path {
120
+ stroke-width: 2.5;
121
+ }
122
+
123
+ filter: drop-shadow(0 0 0.25rem ${({ $color: e }) => e || l})
124
+ drop-shadow(0 0 0.625rem ${({ $color: e }) => e || l})
125
+ drop-shadow(0 0 1.25rem ${({ $color: e }) => e || l})
126
+ drop-shadow(0 0 2.5rem ${({ $color: e }) => e ? `${e}99` : `${d.m100}99`})
127
+ drop-shadow(0 0 3.75rem ${({ $color: e }) => e ? `${e}4D` : `${d.m200}4D`});
128
+ `, O = ({
69
129
  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
130
+ defaultChecked: t = !1,
131
+ onChange: i,
132
+ onIcon: a,
133
+ offIcon: f,
134
+ onColor: $,
135
+ offColor: w,
136
+ onLabel: x,
137
+ offLabel: k,
138
+ label: I,
139
+ id: _,
140
+ disabled: b = !1,
141
+ isGlass: p,
142
+ ...j
81
143
  }) => {
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,
144
+ const [A, B] = U(t), v = e !== void 0, o = v ? e : A, H = (M) => {
145
+ if (M.preventDefault(), b) return;
146
+ const z = !o;
147
+ v || B(z), i == null || i(z);
148
+ }, C = a != null || f != null, y = x != null || k != null, T = o ? a : f, g = o ? x : k;
149
+ return /* @__PURE__ */ P(
150
+ G,
89
151
  {
90
- id: z,
152
+ ...j,
153
+ id: _,
91
154
  type: "button",
92
155
  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,
156
+ "aria-checked": o,
157
+ "aria-label": I || g || void 0,
158
+ "aria-disabled": b || void 0,
159
+ onClick: H,
160
+ $checked: o,
161
+ $disabled: b,
162
+ $onColor: $,
163
+ $offColor: w,
164
+ $hasLabel: y,
102
165
  children: [
103
- /* @__PURE__ */ g(P, { "aria-hidden": "true", $checked: t, children: A && B }),
104
- u && h && /* @__PURE__ */ g(U, { children: h })
166
+ /* @__PURE__ */ h(S, { "aria-hidden": "true", $checked: o, $isGlass: p, children: p ? /* @__PURE__ */ h(N, { $color: o ? $ : w, children: T }) : C && T }),
167
+ y && g && /* @__PURE__ */ h(K, { $isGlass: p, $checked: o, "aria-live": "polite", "aria-atomic": "true", children: g })
105
168
  ]
106
169
  }
107
170
  );
108
171
  };
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
172
+ O.propTypes = {
173
+ checked: r.bool,
174
+ defaultChecked: r.bool,
175
+ onChange: r.func,
176
+ onIcon: r.node,
177
+ offIcon: r.node,
178
+ onColor: r.string,
179
+ offColor: r.string,
180
+ onLabel: r.string,
181
+ offLabel: r.string,
182
+ label: r.string,
183
+ id: r.string,
184
+ disabled: r.bool,
185
+ isGlass: r.bool
122
186
  };
123
187
  export {
124
- E as default
188
+ O as default
125
189
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "3.8.1",
3
+ "version": "3.8.2",
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",