meticulous-ui 3.8.2 → 3.8.3

package/cjs/components/Switch/Switch.cjs

@@ -1,11 +1,11 @@
-"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`
+"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`
   position: relative;
   isolation: isolate;
-  height: ${n}rem;
+  height: ${i}rem;
   width: ${({$hasLabel:e})=>e?"max-content":"4.8rem"};
   min-width: 4.8rem;
   max-width: 20rem;
-  border-radius: ${n/2}rem;
+  border-radius: ${i/2}rem;
   border: 0.094rem solid rgba(0, 0, 0, 0.08);
   display: flex;
   align-items: center;
@@ -14,8 +14,8 @@
   cursor: ${({$disabled:e})=>e?"not-allowed":"pointer"};
   outline: none;
 
-  padding-left: ${({$checked:e,$hasLabel:r})=>r?e?`${s}rem`:`${p}rem`:"0"};
-  padding-right: ${({$checked:e,$hasLabel:r})=>r?e?`${p}rem`:`${s}rem`:"0"};
+  padding-left: ${({$checked:e,$hasLabel:r})=>r?e?`${l}rem`:`${y}rem`:"0"};
+  padding-right: ${({$checked:e,$hasLabel:r})=>r?e?`${y}rem`:`${l}rem`:"0"};
 
   transition:
     background-color 0.3s ease,
@@ -23,13 +23,13 @@
     padding-left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
     padding-right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 
-  background-color: ${({$checked:e,$onColor:r,$offColor:o,$disabled:i})=>i?c.default.m300:e?r||q.default.m500:o||c.default.m400};
+  background-color: ${({$checked:e,$onColor:r,$offColor:a,$disabled:d})=>d?b.default.m300:e?r||R.default.m500:a||b.default.m400};
 
   &:focus-visible {
-    outline: 0.188rem solid ${({$onColor:e})=>e?`${e}88`:`${q.default.m500}88`};
+    outline: 0.188rem solid ${({$onColor:e})=>e?`${e}88`:`${R.default.m500}88`};
     outline-offset: 0.125rem;
   }
-`,O=f.default.div`
+`,X=h.default.div`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -40,10 +40,13 @@
   transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 10;
 
-  ${({$isGlass:e,$checked:r})=>e?h.css`
-          width: ${n*1.55}rem;
-          height: ${n*1.9}rem;
-          left: ${r?`calc(100% - ${n*1.2+.1}rem)`:"-0.75rem"};
+  ${({$isGlass:e,$checked:r})=>e?x.css`
+          width: ${i*1.55}rem;
+          height: ${i*1.9}rem;
+          left: -0.75rem;
+          transform: translateY(-50%) translateX(${r?"var(--glass-travel, 0rem)":"0"});
+          transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+          will-change: transform;
 
           /* transparent center, rim-only glass */
           background: radial-gradient(
@@ -83,14 +86,14 @@
           &::after {
             display: none;
           }
-        `:h.css`
-          width: ${u}rem;
-          height: ${u}rem;
-          left: ${r?`calc(100% - ${p}rem)`:`${s}rem`};
-          background: ${d.default};
+        `:x.css`
+          width: ${g}rem;
+          height: ${g}rem;
+          left: ${r?`calc(100% - ${y}rem)`:`${l}rem`};
+          background: ${m.default};
           box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
         `}
-`,R=f.default.span`
+`,Z=h.default.span`
   position: relative;
   z-index: 2;
   font-size: 0.9rem;
@@ -102,9 +105,9 @@
   text-overflow: ellipsis;
   user-select: none;
   pointer-events: none;
-  padding: ${({$isGlass:e,$checked:r})=>e?r?"0 1.6rem 0 0.6rem":"0 0.6rem 0 1.6rem":`0 ${E}rem`};
+  padding: ${({$isGlass:e,$checked:r})=>e?r?"0 1.6rem 0 0.6rem":"0 0.6rem 0 1.6rem":`0 ${K}rem`};
   color: rgba(255, 255, 255, 0.95);
-`,K=f.default.span`
+`,J=h.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -113,9 +116,9 @@
     stroke-width: 2.5;
   }
 
-  filter: drop-shadow(0 0 0.25rem ${({$color:e})=>e||d.default})
-    drop-shadow(0 0 0.625rem ${({$color:e})=>e||d.default})
-    drop-shadow(0 0 1.25rem ${({$color:e})=>e||d.default})
-    drop-shadow(0 0 2.5rem ${({$color:e})=>e?`${e}99`:`${c.default.m100}99`})
-    drop-shadow(0 0 3.75rem ${({$color:e})=>e?`${e}4D`:`${c.default.m200}4D`});
-`,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;
+  filter: drop-shadow(0 0 0.25rem ${({$color:e})=>e||m.default})
+    drop-shadow(0 0 0.625rem ${({$color:e})=>e||m.default})
+    drop-shadow(0 0 1.25rem ${({$color:e})=>e||m.default})
+    drop-shadow(0 0 2.5rem ${({$color:e})=>e?`${e}99`:`${b.default.m100}99`})
+    drop-shadow(0 0 3.75rem ${({$color:e})=>e?`${e}4D`:`${b.default.m200}4D`});
+`,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

@@ -1,18 +1,18 @@
-import { jsxs as P, jsx as h } from "react/jsx-runtime";
-import { useState as U } from "react";
-import m, { css as D } from "styled-components";
+import { jsxs as Y, jsx as w } from "react/jsx-runtime";
+import { useState as R, useRef as G, useEffect as K } from "react";
+import g, { css as _ } from "styled-components";
 import r from "prop-types";
-import d from "../../colors/grey.js";
-import L from "../../colors/green.js";
-import l from "../../colors/white.js";
-const c = 1.9, s = 0.28, n = c + s * 2, E = 0.7, u = s + c, G = m.button`
+import b from "../../colors/grey.js";
+import j from "../../colors/green.js";
+import m from "../../colors/white.js";
+const u = 1.9, a = 0.28, l = u + a * 2, N = 0.7, v = a + u, X = g.button`
   position: relative;
   isolation: isolate;
-  height: ${n}rem;
+  height: ${l}rem;
   width: ${({ $hasLabel: e }) => e ? "max-content" : "4.8rem"};
   min-width: 4.8rem;
   max-width: 20rem;
-  border-radius: ${n / 2}rem;
+  border-radius: ${l / 2}rem;
   border: 0.094rem solid rgba(0, 0, 0, 0.08);
   display: flex;
   align-items: center;
@@ -21,8 +21,8 @@ const c = 1.9, s = 0.28, n = c + s * 2, E = 0.7, u = s + c, G = m.button`
   cursor: ${({ $disabled: e }) => e ? "not-allowed" : "pointer"};
   outline: none;
 
-  padding-left: ${({ $checked: e, $hasLabel: t }) => t ? e ? `${s}rem` : `${u}rem` : "0"};
-  padding-right: ${({ $checked: e, $hasLabel: t }) => t ? e ? `${u}rem` : `${s}rem` : "0"};
+  padding-left: ${({ $checked: e, $hasLabel: t }) => t ? e ? `${a}rem` : `${v}rem` : "0"};
+  padding-right: ${({ $checked: e, $hasLabel: t }) => t ? e ? `${v}rem` : `${a}rem` : "0"};
 
   transition:
     background-color 0.3s ease,
@@ -30,13 +30,13 @@ const c = 1.9, s = 0.28, n = c + s * 2, E = 0.7, u = s + c, G = m.button`
     padding-left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
     padding-right 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 
-  background-color: ${({ $checked: e, $onColor: t, $offColor: i, $disabled: a }) => a ? d.m300 : e ? t || L.m500 : i || d.m400};
+  background-color: ${({ $checked: e, $onColor: t, $offColor: n, $disabled: c }) => c ? b.m300 : e ? t || j.m500 : n || b.m400};
 
   &:focus-visible {
-    outline: 0.188rem solid ${({ $onColor: e }) => e ? `${e}88` : `${L.m500}88`};
+    outline: 0.188rem solid ${({ $onColor: e }) => e ? `${e}88` : `${j.m500}88`};
     outline-offset: 0.125rem;
   }
-`, S = m.div`
+`, Z = g.div`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -47,10 +47,13 @@ const c = 1.9, s = 0.28, n = c + s * 2, E = 0.7, u = s + c, G = m.button`
   transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 10;
 
-  ${({ $isGlass: e, $checked: t }) => e ? D`
-          width: ${n * 1.55}rem;
-          height: ${n * 1.9}rem;
-          left: ${t ? `calc(100% - ${n * 1.2 + 0.1}rem)` : "-0.75rem"};
+  ${({ $isGlass: e, $checked: t }) => e ? _`
+          width: ${l * 1.55}rem;
+          height: ${l * 1.9}rem;
+          left: -0.75rem;
+          transform: translateY(-50%) translateX(${t ? "var(--glass-travel, 0rem)" : "0"});
+          transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+          will-change: transform;
 
           /* transparent center, rim-only glass */
           background: radial-gradient(
@@ -90,14 +93,14 @@ const c = 1.9, s = 0.28, n = c + s * 2, E = 0.7, u = s + c, G = m.button`
           &::after {
             display: none;
           }
-        ` : D`
-          width: ${c}rem;
-          height: ${c}rem;
-          left: ${t ? `calc(100% - ${u}rem)` : `${s}rem`};
-          background: ${l};
+        ` : _`
+          width: ${u}rem;
+          height: ${u}rem;
+          left: ${t ? `calc(100% - ${v}rem)` : `${a}rem`};
+          background: ${m};
           box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
         `}
-`, K = m.span`
+`, q = g.span`
   position: relative;
   z-index: 2;
   font-size: 0.9rem;
@@ -109,9 +112,9 @@ const c = 1.9, s = 0.28, n = c + s * 2, E = 0.7, u = s + c, G = m.button`
   text-overflow: ellipsis;
   user-select: none;
   pointer-events: none;
-  padding: ${({ $isGlass: e, $checked: t }) => e ? t ? "0 1.6rem 0 0.6rem" : "0 0.6rem 0 1.6rem" : `0 ${E}rem`};
+  padding: ${({ $isGlass: e, $checked: t }) => e ? t ? "0 1.6rem 0 0.6rem" : "0 0.6rem 0 1.6rem" : `0 ${N}rem`};
   color: rgba(255, 255, 255, 0.95);
-`, N = m.span`
+`, J = g.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -120,56 +123,69 @@ const c = 1.9, s = 0.28, n = c + s * 2, E = 0.7, u = s + c, G = m.button`
     stroke-width: 2.5;
   }
 
-  filter: drop-shadow(0 0 0.25rem ${({ $color: e }) => e || l})
-    drop-shadow(0 0 0.625rem ${({ $color: e }) => e || l})
-    drop-shadow(0 0 1.25rem ${({ $color: e }) => e || l})
-    drop-shadow(0 0 2.5rem ${({ $color: e }) => e ? `${e}99` : `${d.m100}99`})
-    drop-shadow(0 0 3.75rem ${({ $color: e }) => e ? `${e}4D` : `${d.m200}4D`});
-`, O = ({
+  filter: drop-shadow(0 0 0.25rem ${({ $color: e }) => e || m})
+    drop-shadow(0 0 0.625rem ${({ $color: e }) => e || m})
+    drop-shadow(0 0 1.25rem ${({ $color: e }) => e || m})
+    drop-shadow(0 0 2.5rem ${({ $color: e }) => e ? `${e}99` : `${b.m100}99`})
+    drop-shadow(0 0 3.75rem ${({ $color: e }) => e ? `${e}4D` : `${b.m200}4D`});
+`, Q = ({
   checked: e,
   defaultChecked: t = !1,
-  onChange: i,
-  onIcon: a,
-  offIcon: f,
-  onColor: $,
-  offColor: w,
-  onLabel: x,
-  offLabel: k,
-  label: I,
-  id: _,
-  disabled: b = !1,
-  isGlass: p,
-  ...j
+  onChange: n,
+  onIcon: c,
+  offIcon: x,
+  onColor: k,
+  offColor: y,
+  onLabel: T,
+  offLabel: z,
+  label: A,
+  id: E,
+  disabled: f = !1,
+  isGlass: s,
+  ...p
 }) => {
-  const [A, B] = U(t), v = e !== void 0, o = v ? e : A, H = (M) => {
-    if (M.preventDefault(), b) return;
-    const z = !o;
-    v || B(z), i == null || i(z);
-  }, C = a != null || f != null, y = x != null || k != null, T = o ? a : f, g = o ? x : k;
-  return /* @__PURE__ */ P(
-    G,
+  const [H, S] = R(t), D = e !== void 0, o = D ? e : H, h = G(null), [L, F] = R(null);
+  K(() => {
+    if (!s || !h.current) return;
+    const d = h.current, i = () => {
+      const U = parseFloat(getComputedStyle(document.documentElement).fontSize), O = d.getBoundingClientRect().width / U - (l * 1.2 + 0.1 - 0.75);
+      F(`${O.toFixed(4)}rem`);
+    };
+    i();
+    const I = new ResizeObserver(i);
+    return I.observe(d), () => I.disconnect();
+  }, [s]);
+  const M = (d) => {
+    if (d.preventDefault(), f) return;
+    const i = !o;
+    D || S(i), n == null || n(i);
+  }, P = c != null || x != null, B = T != null || z != null, C = o ? c : x, $ = o ? T : z;
+  return /* @__PURE__ */ Y(
+    X,
     {
-      ...j,
-      id: _,
+      ...p,
+      ref: h,
+      id: E,
       type: "button",
       role: "switch",
       "aria-checked": o,
-      "aria-label": I || g || void 0,
-      "aria-disabled": b || void 0,
-      onClick: H,
+      "aria-label": A || $ || void 0,
+      "aria-disabled": f || void 0,
+      onClick: M,
       $checked: o,
-      $disabled: b,
-      $onColor: $,
-      $offColor: w,
-      $hasLabel: y,
+      $disabled: f,
+      $onColor: k,
+      $offColor: y,
+      $hasLabel: B,
+      style: L != null ? { ...p.style, "--glass-travel": L } : p.style,
       children: [
-        /* @__PURE__ */ h(S, { "aria-hidden": "true", $checked: o, $isGlass: p, children: p ? /* @__PURE__ */ h(N, { $color: o ? $ : w, children: T }) : C && T }),
-        y && g && /* @__PURE__ */ h(K, { $isGlass: p, $checked: o, "aria-live": "polite", "aria-atomic": "true", children: g })
+        /* @__PURE__ */ w(Z, { "aria-hidden": "true", $checked: o, $isGlass: s, children: s ? /* @__PURE__ */ w(J, { $color: o ? k : y, children: C }) : P && C }),
+        B && $ && /* @__PURE__ */ w(q, { $isGlass: s, $checked: o, "aria-live": "polite", "aria-atomic": "true", children: $ })
       ]
     }
   );
 };
-O.propTypes = {
+Q.propTypes = {
   checked: r.bool,
   defaultChecked: r.bool,
   onChange: r.func,
@@ -185,5 +201,5 @@ O.propTypes = {
   isGlass: r.bool
 };
 export {
-  O as default
+  Q as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.8.2",
+  "version": "3.8.3",
   "license": "ISC",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "types": "./index.d.ts",