meticulous-ui 3.9.5 → 3.10.1

package/cjs/components/Ripple/Ripple.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),y=require("react"),g=".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";if(typeof document!="undefined"&&!document.getElementById("meticulous-ripple-styles")){const i=document.createElement("style");i.id="meticulous-ripple-styles",i.textContent=g,document.head.appendChild(i)}const h=({children:i,rippleColor:a="rgba(255, 255, 255, 0.3)",className:p="",...d})=>{const r=y.useRef(null),s=(t,n)=>{const o=r.current;if(!o)return;const e=document.createElement("span"),c=o.getBoundingClientRect(),l=Math.max(c.width,c.height);e.style.width=e.style.height=`${l}px`,e.style.left=`${t-l/2}px`,e.style.top=`${n-l/2}px`,e.style.backgroundColor=a,e.classList.add("ripple-effect"),o.appendChild(e),e.addEventListener("animationend",()=>e.remove())},u=t=>{if(t.detail===0)return;const n=r.current.getBoundingClientRect();s(t.clientX-n.left,t.clientY-n.top)},m=t=>{if(t.key!=="Enter"&&t.key!==" ")return;const n=r.current.getBoundingClientRect();s(n.width/2,n.height/2)};return f.jsx("div",{ref:r,className:`ripple-container ${p}`,onClick:u,onKeyDown:m,...d,children:i})};exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react/jsx-runtime"),c=require("react"),g=".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}",h=({children:a,rippleColor:p="rgba(255, 255, 255, 0.3)",className:u="",...d})=>{const i=c.useRef(null);c.useEffect(()=>{if(!document.getElementById("meticulous-ripple-styles")){const e=document.createElement("style");e.id="meticulous-ripple-styles",e.textContent=g,document.head.appendChild(e)}},[]);const l=(e,n)=>{const r=i.current;if(!r)return;const t=document.createElement("span"),s=r.getBoundingClientRect(),o=Math.max(s.width,s.height);t.style.width=t.style.height=`${o}px`,t.style.left=`${e-o/2}px`,t.style.top=`${n-o/2}px`,t.style.backgroundColor=p,t.classList.add("ripple-effect"),r.appendChild(t),t.addEventListener("animationend",()=>t.remove())},m=e=>{if(e.detail===0)return;const n=i.current.getBoundingClientRect();l(e.clientX-n.left,e.clientY-n.top)},f=e=>{if(e.key!=="Enter"&&e.key!==" ")return;const n=i.current.getBoundingClientRect();l(n.width/2,n.height/2)};return y.jsx("div",{ref:i,className:`ripple-container ${u}`,onClick:m,onKeyDown:f,...d,children:a})};exports.default=h;

package/cjs/components/RootComponent/RootComponent.cjs

@@ -1,3 +1,3 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),n=require("prop-types"),r=require("react"),d=require("styled-components"),t=e=>e&&e.__esModule?e:{default:e},l=t(n),c=t(d),i=c.default.div`
   -webkit-text-size-adjust: 100%;
-`,o=({children:e,...s})=>(r.useMemo(()=>{document.documentElement.style.fontSize="62.5%"},[]),u.jsx(i,{...s,children:e}));o.propTypes={children:l.default.node};exports.default=o;
+`,o=({children:e,...s})=>(r.useMemo(()=>{document.documentElement.style.fontSize="62.5%",document.body.style.fontSize="1.6rem"},[]),u.jsx(i,{...s,children:e}));o.propTypes={children:l.default.node};exports.default=o;

package/components/Ripple/Ripple.js

@@ -1,42 +1,44 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useRef as y } from "react";
-const h = ".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}";
-if (typeof document != "undefined" && !document.getElementById("meticulous-ripple-styles")) {
-  const i = document.createElement("style");
-  i.id = "meticulous-ripple-styles", i.textContent = h, document.head.appendChild(i);
-}
-const R = ({
-  children: i,
+import { useRef as y, useEffect as h } from "react";
+const g = ".ripple-container{position:relative;overflow:hidden;display:inline-block;cursor:pointer}.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-animation 600ms linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}", x = ({
+  children: c,
   rippleColor: p = "rgba(255, 255, 255, 0.3)",
   className: a = "",
   ...d
 }) => {
-  const o = y(null), s = (t, n) => {
-    const r = o.current;
-    if (!r) return;
-    const e = document.createElement("span"), c = r.getBoundingClientRect(), l = Math.max(c.width, c.height);
-    e.style.width = e.style.height = `${l}px`, e.style.left = `${t - l / 2}px`, e.style.top = `${n - l / 2}px`, e.style.backgroundColor = p, e.classList.add("ripple-effect"), r.appendChild(e), e.addEventListener("animationend", () => e.remove());
-  }, u = (t) => {
-    if (t.detail === 0) return;
-    const n = o.current.getBoundingClientRect();
-    s(t.clientX - n.left, t.clientY - n.top);
-  }, m = (t) => {
-    if (t.key !== "Enter" && t.key !== " ") return;
-    const n = o.current.getBoundingClientRect();
-    s(n.width / 2, n.height / 2);
+  const i = y(null);
+  h(() => {
+    if (!document.getElementById("meticulous-ripple-styles")) {
+      const e = document.createElement("style");
+      e.id = "meticulous-ripple-styles", e.textContent = g, document.head.appendChild(e);
+    }
+  }, []);
+  const l = (e, n) => {
+    const o = i.current;
+    if (!o) return;
+    const t = document.createElement("span"), s = o.getBoundingClientRect(), r = Math.max(s.width, s.height);
+    t.style.width = t.style.height = `${r}px`, t.style.left = `${e - r / 2}px`, t.style.top = `${n - r / 2}px`, t.style.backgroundColor = p, t.classList.add("ripple-effect"), o.appendChild(t), t.addEventListener("animationend", () => t.remove());
+  }, u = (e) => {
+    if (e.detail === 0) return;
+    const n = i.current.getBoundingClientRect();
+    l(e.clientX - n.left, e.clientY - n.top);
+  }, m = (e) => {
+    if (e.key !== "Enter" && e.key !== " ") return;
+    const n = i.current.getBoundingClientRect();
+    l(n.width / 2, n.height / 2);
   };
   return /* @__PURE__ */ f(
     "div",
     {
-      ref: o,
+      ref: i,
       className: `ripple-container ${a}`,
       onClick: u,
       onKeyDown: m,
       ...d,
-      children: i
+      children: c
     }
   );
 };
 export {
-  R as default
+  x as default
 };

package/components/RootComponent/RootComponent.js

@@ -1,16 +1,15 @@
 import { jsx as e } from "react/jsx-runtime";
-import r from "prop-types";
-import { useMemo as m } from "react";
+import m from "prop-types";
+import { useMemo as r } from "react";
 import n from "styled-components";
-const p = n.div`
+const s = n.div`
   -webkit-text-size-adjust: 100%;
-`, s = ({ children: o, ...t }) => (m(() => {
-  document.documentElement.style.fontSize = "62.5%";
-}, []), /* @__PURE__ */ e(p, { ...t, children: o }));
-s.propTypes = {
-  /** Content to render inside the root wrapper */
-  children: r.node
+`, p = ({ children: o, ...t }) => (r(() => {
+  document.documentElement.style.fontSize = "62.5%", document.body.style.fontSize = "1.6rem";
+}, []), /* @__PURE__ */ e(s, { ...t, children: o }));
+p.propTypes = {
+  children: m.node
 };
 export {
-  s as default
+  p as default
 };

package/package.json

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