meticulous-ui 3.8.3 → 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 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`
+"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: ${i}rem;
+  height: ${c}rem;
   width: ${({$hasLabel:e})=>e?"max-content":"4.8rem"};
   min-width: 4.8rem;
   max-width: 20rem;
-  border-radius: ${i/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?`${l}rem`:`${y}rem`:"0"};
-  padding-right: ${({$checked:e,$hasLabel:r})=>r?e?`${y}rem`:`${l}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:a,$disabled:d})=>d?b.default.m300:e?r||R.default.m500:a||b.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`:`${R.default.m500}88`};
+    outline: 0.188rem solid ${({$onColor:e})=>e?`${e}88`:`${B.default.m500}88`};
     outline-offset: 0.125rem;
   }
-`,X=h.default.div`
+`,C=h.default.div`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -40,9 +40,9 @@
   transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 10;
 
-  ${({$isGlass:e,$checked:r})=>e?x.css`
-          width: ${i*1.55}rem;
-          height: ${i*1.9}rem;
+  ${({$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);
@@ -86,14 +86,14 @@
           &::after {
             display: none;
           }
-        `:x.css`
-          width: ${g}rem;
-          height: ${g}rem;
-          left: ${r?`calc(100% - ${y}rem)`:`${l}rem`};
-          background: ${m.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);
         `}
-`,Z=h.default.span`
+`,J=h.default.span`
   position: relative;
   z-index: 2;
   font-size: 0.9rem;
@@ -105,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 ${K}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);
-`,J=h.default.span`
+`,Q=h.default.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -116,9 +116,9 @@
     stroke-width: 2.5;
   }
 
-  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;
+  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 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 { 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 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`
+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: ${l}rem;
+  height: ${c}rem;
   width: ${({ $hasLabel: e }) => e ? "max-content" : "4.8rem"};
   min-width: 4.8rem;
   max-width: 20rem;
-  border-radius: ${l / 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 u = 1.9, a = 0.28, l = u + a * 2, N = 0.7, v = a + u, X = g.button`
   cursor: ${({ $disabled: e }) => e ? "not-allowed" : "pointer"};
   outline: none;
 
-  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"};
+  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 u = 1.9, a = 0.28, l = u + a * 2, N = 0.7, v = a + u, X = g.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: n, $disabled: c }) => c ? b.m300 : e ? t || j.m500 : n || b.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` : `${j.m500}88`};
+    outline: 0.188rem solid ${({ $onColor: e }) => e ? `${e}88` : `${A.m500}88`};
     outline-offset: 0.125rem;
   }
-`, Z = g.div`
+`, C = p.div`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -47,9 +47,9 @@ const u = 1.9, a = 0.28, l = u + a * 2, N = 0.7, v = a + u, X = g.button`
   transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 10;
 
-  ${({ $isGlass: e, $checked: t }) => e ? _`
-          width: ${l * 1.55}rem;
-          height: ${l * 1.9}rem;
+  ${({ $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);
@@ -93,14 +93,14 @@ const u = 1.9, a = 0.28, l = u + a * 2, N = 0.7, v = a + u, X = g.button`
           &::after {
             display: none;
           }
-        ` : _`
-          width: ${u}rem;
-          height: ${u}rem;
-          left: ${t ? `calc(100% - ${v}rem)` : `${a}rem`};
-          background: ${m};
+        ` : 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);
         `}
-`, q = g.span`
+`, J = p.span`
   position: relative;
   z-index: 2;
   font-size: 0.9rem;
@@ -112,9 +112,9 @@ const u = 1.9, a = 0.28, l = u + a * 2, N = 0.7, v = a + u, X = g.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 ${N}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);
-`, J = g.span`
+`, Q = p.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -123,69 +123,83 @@ const u = 1.9, a = 0.28, l = u + a * 2, N = 0.7, v = a + u, X = g.button`
     stroke-width: 2.5;
   }
 
-  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})
+  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`});
-`, Q = ({
+`, V = ({
   checked: e,
   defaultChecked: t = !1,
-  onChange: n,
-  onIcon: c,
+  onChange: i,
+  onIcon: d,
   offIcon: x,
-  onColor: k,
-  offColor: y,
-  onLabel: T,
-  offLabel: z,
-  label: A,
-  id: E,
-  disabled: f = !1,
-  isGlass: s,
-  ...p
+  onColor: y,
+  offColor: T,
+  onLabel: z,
+  offLabel: D,
+  label: S,
+  id: F,
+  disabled: m = !1,
+  isGlass: a,
+  ...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`);
+  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`);
     };
-    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,
+    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,
     {
-      ...p,
-      ref: h,
-      id: E,
+      ...g,
+      ref: $,
+      id: F,
       type: "button",
       role: "switch",
-      "aria-checked": o,
-      "aria-label": A || $ || void 0,
-      "aria-disabled": f || void 0,
-      onClick: M,
-      $checked: o,
-      $disabled: f,
-      $onColor: k,
-      $offColor: y,
-      $hasLabel: B,
-      style: L != null ? { ...p.style, "--glass-travel": L } : p.style,
+      "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__ */ 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: $ })
+        /* @__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 })
       ]
     }
   );
 };
-Q.propTypes = {
+V.propTypes = {
   checked: r.bool,
   defaultChecked: r.bool,
   onChange: r.func,
@@ -201,5 +215,5 @@ Q.propTypes = {
   isGlass: r.bool
 };
 export {
-  Q as default
+  V as default
 };

package/package.json

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