meticulous-ui 3.8.2 → 3.8.4

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 m=require("react/jsx-runtime"),i=require("react"),y=require("styled-components"),N=require("prop-types"),g=require("../../colors/grey.cjs"),B=require("../../colors/green.cjs"),b=require("../../colors/white.cjs"),E=e=>e&&e.__esModule?e:{default:e},h=E(y),t=E(N),p=1.9,d=.28,c=p+d*2,X=.7,k=d+p,Z=h.default.button`
   position: relative;
   isolation: isolate;
-  height: ${n}rem;
+  height: ${c}rem;
   width: ${({$hasLabel:e})=>e?"max-content":"4.8rem"};
   min-width: 4.8rem;
   max-width: 20rem;
-  border-radius: ${n/2}rem;
+  border-radius: ${c/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?`${d}rem`:`${k}rem`:"0"};
+  padding-right: ${({$checked:e,$hasLabel:r})=>r?e?`${k}rem`:`${d}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:s,$disabled:u})=>u?g.default.m300:e?r||B.default.m500:s||g.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`:`${B.default.m500}88`};
     outline-offset: 0.125rem;
   }
-`,O=f.default.div`
+`,C=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?y.css`
+          width: ${c*1.55}rem;
+          height: ${c*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};
+        `:y.css`
+          width: ${p}rem;
+          height: ${p}rem;
+          left: ${r?`calc(100% - ${k}rem)`:`${d}rem`};
+          background: ${b.default};
           box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
         `}
-`,R=f.default.span`
+`,J=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 ${X}rem`};
   color: rgba(255, 255, 255, 0.95);
-`,K=f.default.span`
+`,Q=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||b.default})
+    drop-shadow(0 0 0.625rem ${({$color:e})=>e||b.default})
+    drop-shadow(0 0 1.25rem ${({$color:e})=>e||b.default})
+    drop-shadow(0 0 2.5rem ${({$color:e})=>e?`${e}99`:`${g.default.m100}99`})
+    drop-shadow(0 0 3.75rem ${({$color:e})=>e?`${e}4D`:`${g.default.m200}4D`});
+`,H=({checked:e,defaultChecked:r=!1,onChange:s,onIcon:u,offIcon:_,onColor:T,offColor:D,onLabel:z,offLabel:j,label:I,id:P,disabled:f=!1,isGlass:l,...$})=>{const[A,q]=i.useState(r),w=e!==void 0,o=w?e:A,v=i.useRef(null);i.useRef(0);const[R,F]=i.useState(null);i.useEffect(()=>{if(!l||!v.current)return;const n=v.current,a=()=>{const Y=parseFloat(getComputedStyle(document.documentElement).fontSize),G=n.getBoundingClientRect().width/Y-(c*1.2+.1-.75);F(`${G.toFixed(4)}rem`)};a();const M=new ResizeObserver(a);return M.observe(n),()=>M.disconnect()},[l]);const O=n=>{if(n.preventDefault(),f)return;const a=!o;w||q(a),s==null||s(a)},U=n=>{if(n.key==="Enter"||n.key===" "){if(n.repeat){n.preventDefault();return}if(n.preventDefault(),!f){const a=!o;w||q(a),s==null||s(a)}}},K=u!=null||_!=null,S=z!=null||j!=null,L=o?u:_,x=o?z:j;return m.jsxs(Z,{...$,ref:v,id:P,type:"button",role:"switch","aria-checked":o,"aria-label":I||x||void 0,"aria-disabled":f||void 0,onClick:O,onKeyDown:U,$checked:o,$disabled:f,$onColor:T,$offColor:D,$hasLabel:S,style:R!=null?{...$.style,"--glass-travel":R}:$.style,children:[m.jsx(C,{"aria-hidden":"true",$checked:o,$isGlass:l,children:l?m.jsx(Q,{$color:o?T:D,children:L}):K&&L}),S&&x&&m.jsx(J,{$isGlass:l,$checked:o,"aria-live":"polite","aria-atomic":"true",children:x})]})};H.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=H;

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 N, jsx as v } from "react/jsx-runtime";
+import { useState as R, useRef as _, useEffect as X } from "react";
+import p, { css as j } 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 A from "../../colors/green.js";
+import u from "../../colors/white.js";
+const f = 1.9, l = 0.28, c = f + l * 2, Z = 0.7, k = l + f, q = p.button`
   position: relative;
   isolation: isolate;
-  height: ${n}rem;
+  height: ${c}rem;
   width: ${({ $hasLabel: e }) => e ? "max-content" : "4.8rem"};
   min-width: 4.8rem;
   max-width: 20rem;
-  border-radius: ${n / 2}rem;
+  border-radius: ${c / 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 ? `${l}rem` : `${k}rem` : "0"};
+  padding-right: ${({ $checked: e, $hasLabel: t }) => t ? e ? `${k}rem` : `${l}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: i, $disabled: d }) => d ? b.m300 : e ? t || A.m500 : i || 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` : `${A.m500}88`};
     outline-offset: 0.125rem;
   }
-`, S = m.div`
+`, C = p.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 ? j`
+          width: ${c * 1.55}rem;
+          height: ${c * 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};
+        ` : j`
+          width: ${f}rem;
+          height: ${f}rem;
+          left: ${t ? `calc(100% - ${k}rem)` : `${l}rem`};
+          background: ${u};
           box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.25);
         `}
-`, K = m.span`
+`, J = p.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 ${Z}rem`};
   color: rgba(255, 255, 255, 0.95);
-`, N = m.span`
+`, Q = p.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -120,56 +123,83 @@ 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 || u})
+    drop-shadow(0 0 0.625rem ${({ $color: e }) => e || u})
+    drop-shadow(0 0 1.25rem ${({ $color: e }) => e || u})
+    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`});
+`, V = ({
   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
+  onIcon: d,
+  offIcon: x,
+  onColor: y,
+  offColor: T,
+  onLabel: z,
+  offLabel: D,
+  label: S,
+  id: F,
+  disabled: m = !1,
+  isGlass: a,
+  ...g
 }) => {
-  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 [M, L] = R(t), h = e !== void 0, n = h ? e : M, $ = _(null);
+  _(0);
+  const [B, P] = R(null);
+  X(() => {
+    if (!a || !$.current) return;
+    const o = $.current, s = () => {
+      const Y = parseFloat(getComputedStyle(document.documentElement).fontSize), G = o.getBoundingClientRect().width / Y - (c * 1.2 + 0.1 - 0.75);
+      P(`${G.toFixed(4)}rem`);
+    };
+    s();
+    const I = new ResizeObserver(s);
+    return I.observe(o), () => I.disconnect();
+  }, [a]);
+  const U = (o) => {
+    if (o.preventDefault(), m) return;
+    const s = !n;
+    h || L(s), i == null || i(s);
+  }, K = (o) => {
+    if (o.key === "Enter" || o.key === " ") {
+      if (o.repeat) {
+        o.preventDefault();
+        return;
+      }
+      if (o.preventDefault(), !m) {
+        const s = !n;
+        h || L(s), i == null || i(s);
+      }
+    }
+  }, O = d != null || x != null, E = z != null || D != null, H = n ? d : x, w = n ? z : D;
+  return /* @__PURE__ */ N(
+    q,
     {
-      ...j,
-      id: _,
+      ...g,
+      ref: $,
+      id: F,
       type: "button",
       role: "switch",
-      "aria-checked": o,
-      "aria-label": I || g || void 0,
-      "aria-disabled": b || void 0,
-      onClick: H,
-      $checked: o,
-      $disabled: b,
-      $onColor: $,
-      $offColor: w,
-      $hasLabel: y,
+      "aria-checked": n,
+      "aria-label": S || w || void 0,
+      "aria-disabled": m || void 0,
+      onClick: U,
+      onKeyDown: K,
+      $checked: n,
+      $disabled: m,
+      $onColor: y,
+      $offColor: T,
+      $hasLabel: E,
+      style: B != null ? { ...g.style, "--glass-travel": B } : g.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__ */ v(C, { "aria-hidden": "true", $checked: n, $isGlass: a, children: a ? /* @__PURE__ */ v(Q, { $color: n ? y : T, children: H }) : O && H }),
+        E && w && /* @__PURE__ */ v(J, { $isGlass: a, $checked: n, "aria-live": "polite", "aria-atomic": "true", children: w })
       ]
     }
   );
 };
-O.propTypes = {
+V.propTypes = {
   checked: r.bool,
   defaultChecked: r.bool,
   onChange: r.func,
@@ -185,5 +215,5 @@ O.propTypes = {
   isGlass: r.bool
 };
 export {
-  O as default
+  V as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.8.2",
+  "version": "3.8.4",
   "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",