meticulous-ui 3.12.1 → 3.12.2

package/components/Accordion/Accordion.js

@@ -1,28 +1,31 @@
-import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { jsx as d, jsxs as h } from "react/jsx-runtime";
 import { useState as v } from "react";
-import r from "prop-types";
-import t, { keyframes as w } from "styled-components";
+import n from "prop-types";
+import i, { keyframes as w } from "styled-components";
 import c from "../../colors/grey.js";
 import { black as l } from "../../colors/black.js";
 import B from "../Icons/ChevronDown.js";
 const O = w`
   from { opacity: 0; transform: translateY(-6px); }
   to   { opacity: 1; transform: translateY(0); }
-`, S = t.div`
+`, S = i.div`
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 12px;
-`, T = t.div`
+`, T = i.div`
   border: 1.5px solid
-    ${({ $isOpen: o, $activeBackground: n, $itemBorderColor: s }) => o && n ? "transparent" : s || c.m200};
+    ${({ $isOpen: o, $activeBackground: e, $itemBorderColor: s }) => o && e ? "transparent" : s || c.m200};
   border-radius: 12px;
   overflow: hidden;
-  background: ${({ $isOpen: o, $activeBackground: n, $itemBackground: s }) => o && n ? n : s};
+  background: ${({ $isOpen: o, $activeBackground: e, $itemBackground: s }) => o && e ? e : s};
   transition:
     background 0.22s ease,
     border-color 0.22s ease;
-`, I = t.button`
+`, I = i.h3`
+  margin: 0;
+  font: inherit;
+`, R = i.button`
   width: 100%;
   display: flex;
   align-items: center;
@@ -38,32 +41,32 @@ const O = w`
     outline-offset: -2px;
     border-radius: 12px;
   }
-`, R = t.div`
+`, j = i.div`
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   border: 1.5px solid
-    ${({ $iconBackground: o, $borderColor: n }) => o ? "transparent" : n || c.m200};
+    ${({ $iconBackground: o, $borderColor: e }) => o ? "transparent" : e || c.m200};
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: ${({ $iconColor: o }) => o};
   background: ${({ $iconBackground: o }) => o || "none"};
-`, j = t.span`
+`, q = i.span`
   flex: 1;
   font-size: 15px;
   font-weight: 600;
   color: ${({ $titleColor: o }) => o || l.m700};
   line-height: 1.4;
-`, q = t.div`
+`, z = i.div`
   flex-shrink: 0;
   display: flex;
   align-items: center;
   color: ${({ $chevronColor: o }) => o || c.m600};
   transform: rotate(${({ $isOpen: o }) => o ? "180deg" : "0deg"});
   transition: transform 0.22s ease;
-`, z = t.div`
+`, A = i.div`
   padding: 0 20px 18px calc(20px + 40px + 16px);
   font-size: 14px;
   line-height: 1.65;
@@ -74,109 +77,110 @@ const O = w`
     color: ${({ $bodyColor: o }) => o || l.m700};
     text-decoration: underline;
   }
-`, A = l.m700, D = ({
+`, D = l.m700, H = ({
   items: o = [],
-  allowMultiple: n = !1,
+  allowMultiple: e = !1,
   activeBackground: s,
-  iconColor: h,
+  iconColor: u,
   iconBackground: m,
   itemBackground: $ = "#fff",
   itemBorderColor: p,
   titleColor: g,
   bodyColor: b
 }) => {
-  const [y, k] = v(/* @__PURE__ */ new Set()), C = (e) => {
-    k((i) => {
-      const d = n ? new Set(i) : /* @__PURE__ */ new Set();
-      return i.has(e) ? d.delete(e) : d.add(e), d;
+  const [y, k] = v(/* @__PURE__ */ new Set()), C = (r) => {
+    k((t) => {
+      const a = e ? new Set(t) : /* @__PURE__ */ new Set();
+      return t.has(r) ? a.delete(r) : a.add(r), a;
     });
   };
-  return /* @__PURE__ */ a(S, { children: o.map((e) => {
-    var d, f, x;
-    const i = y.has(e.id);
-    return /* @__PURE__ */ u(
+  return /* @__PURE__ */ d(S, { children: o.map((r) => {
+    var a, f, x;
+    const t = y.has(r.id);
+    return /* @__PURE__ */ h(
       T,
       {
-        $isOpen: i,
+        $isOpen: t,
         $activeBackground: s,
         $itemBackground: $,
         $itemBorderColor: p,
         children: [
-          /* @__PURE__ */ u(
-            I,
+          /* @__PURE__ */ d(I, { children: /* @__PURE__ */ h(
+            R,
             {
               type: "button",
-              "aria-expanded": i,
-              "aria-controls": `accordion-body-${e.id}`,
-              id: `accordion-header-${e.id}`,
-              onClick: () => C(e.id),
+              "aria-expanded": t,
+              "aria-controls": `accordion-body-${r.id}`,
+              id: `accordion-header-${r.id}`,
+              onClick: () => C(r.id),
               children: [
-                e.icon && /* @__PURE__ */ a(
-                  R,
+                r.icon && /* @__PURE__ */ d(
+                  j,
                   {
                     "aria-hidden": "true",
-                    $iconColor: (f = (d = e.iconColor) != null ? d : h) != null ? f : A,
-                    $iconBackground: (x = e.iconBackground) != null ? x : m,
+                    $iconColor: (f = (a = r.iconColor) != null ? a : u) != null ? f : D,
+                    $iconBackground: (x = r.iconBackground) != null ? x : m,
                     $borderColor: p,
-                    children: e.icon
+                    children: r.icon
                   }
                 ),
-                /* @__PURE__ */ a(j, { $titleColor: g, children: e.title }),
-                /* @__PURE__ */ a(q, { "aria-hidden": "true", $isOpen: i, $chevronColor: g, children: /* @__PURE__ */ a(B, { size: 18 }) })
+                /* @__PURE__ */ d(q, { $titleColor: g, children: r.title }),
+                /* @__PURE__ */ d(z, { "aria-hidden": "true", $isOpen: t, $chevronColor: g, children: /* @__PURE__ */ d(B, { size: 18 }) })
               ]
             }
-          ),
-          i && /* @__PURE__ */ a(
-            z,
+          ) }),
+          /* @__PURE__ */ d(
+            A,
             {
-              id: `accordion-body-${e.id}`,
+              id: `accordion-body-${r.id}`,
               role: "region",
-              "aria-labelledby": `accordion-header-${e.id}`,
+              "aria-labelledby": `accordion-header-${r.id}`,
+              hidden: !t,
               $bodyColor: b,
-              children: e.content
+              children: r.content
             }
           )
         ]
       },
-      e.id
+      r.id
     );
   }) });
 };
-D.propTypes = {
+H.propTypes = {
   /** Array of accordion items */
-  items: r.arrayOf(
-    r.shape({
+  items: n.arrayOf(
+    n.shape({
       /** Unique identifier for the item */
-      id: r.oneOfType([r.string, r.number]).isRequired,
+      id: n.oneOfType([n.string, n.number]).isRequired,
       /** Question / heading text */
-      title: r.node.isRequired,
+      title: n.node.isRequired,
       /** Answer / expanded content (string or JSX) */
-      content: r.node.isRequired,
+      content: n.node.isRequired,
       /** Optional icon node rendered in the icon box */
-      icon: r.node,
+      icon: n.node,
       /** Color applied to the icon — defaults to black.m700 */
-      iconColor: r.string,
+      iconColor: n.string,
       /** Background color of the icon box for this item — overrides accordion-level iconBackground */
-      iconBackground: r.string
+      iconBackground: n.string
     })
   ),
   /** When true, multiple items can be open simultaneously */
-  allowMultiple: r.bool,
+  allowMultiple: n.bool,
   /** Background color applied to the expanded item — use a token from the colors palette e.g. blue.m50 */
-  activeBackground: r.string,
+  activeBackground: n.string,
   /** Default icon color for all items — overridden per-item via item.iconColor. Defaults to black.m700 */
-  iconColor: r.string,
+  iconColor: n.string,
   /** Default icon box background for all items — overridden per-item via item.iconBackground */
-  iconBackground: r.string,
+  iconBackground: n.string,
   /** Background color for resting (closed) items. Defaults to '#fff' — use a palette token e.g. blueGray.m800 for dark mode */
-  itemBackground: r.string,
+  itemBackground: n.string,
   /** Border color for all items — use a palette token e.g. blueGray.m600 for dark mode */
-  itemBorderColor: r.string,
+  itemBorderColor: n.string,
   /** Title and chevron text color — use a light palette token e.g. blueGray.m100 for dark mode */
-  titleColor: r.string,
+  titleColor: n.string,
   /** Body content text color — use a muted light token e.g. blueGray.m300 for dark mode */
-  bodyColor: r.string
+  bodyColor: n.string
 };
 export {
-  D as default
+  H as default
 };

package/components/Input/Textarea/Textarea.js

@@ -1,9 +1,9 @@
 import { jsxs as H, jsx as i } from "react/jsx-runtime";
 import { useState as K, useRef as Q } from "react";
 import U from "../../../colors/white.js";
-import s from "../../../colors/grey.js";
+import m from "../../../colors/grey.js";
 import B from "./SvgIcon.js";
-import n, { css as c } from "styled-components";
+import n, { css as a } from "styled-components";
 import { black as L } from "../../../colors/black.js";
 import v from "../../../colors/red.js";
 import { blue as V } from "../../../colors/blue.js";
@@ -21,15 +21,15 @@ const ie = {
   yellow: Y.m500,
   orange: Z.m500,
   black: L.m500,
-  grey: s.m500,
+  grey: m.m500,
   violet: ee.m500,
   teal: oe.m500,
   purple: re.m500,
   pink: te.m500
 }, ne = (e) => {
   var o;
-  return (o = ie[e]) != null ? o : s.m500;
-}, x = ({ $hasError: e, $shade: o, $isFocused: r, value: a, $onlyPh: d }) => e ? typeof a == "string" && !a && !r ? s.m500 : v.m400 : r && !d ? o : s.m500, se = n.textarea`
+  return (o = ie[e]) != null ? o : m.m500;
+}, x = ({ $hasError: e, $shade: o, $isFocused: r, value: s, $onlyPh: d }) => e ? typeof s == "string" && !s && !r ? m.m500 : v.m400 : r && !d ? o : m.m500, se = n.textarea`
   border-radius: 0.64rem;
   font-size: 2.24rem;
   border: 2px solid ${({ $hasError: e }) => e ? v.m400 : L.m200};
@@ -40,11 +40,19 @@ const ie = {
   min-height: 2.24rem;
   min-width: 4.8rem;
 
-  ${({ $isResizeNone: e }) => e && c`
+  ${({ $hasLeftIcon: e }) => e && a`
+      padding-left: 3.52rem;
+    `}
+
+  ${({ $hasRightIcon: e }) => e && a`
+      padding-right: 3.52rem;
+    `}
+
+  ${({ $isResizeNone: e }) => e && a`
       resize: none;
     `}
 
-  ${({ $isDynamic: e }) => e && c`
+  ${({ $isDynamic: e }) => e && a`
       resize: none;
     `}
 
@@ -58,7 +66,7 @@ const ie = {
   }
 
   &::placeholder {
-    color: ${s.m500};
+    color: ${m.m500};
     font-weight: 300;
     font-size: 2.24rem;
     background-color: ${({ $background: e }) => e};
@@ -97,14 +105,14 @@ const ie = {
   max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
   max-width: stretch; /* Modern Standard */
 
-  ${({ $isFocused: e, $value: o, $onlyPh: r }) => !r && (e || o) ? c`
+  ${({ $isFocused: e, $value: o, $onlyPh: r }) => !r && (e || o) ? a`
           top: -0.64rem;
           left: 0.8rem;
           padding: 0 0.64rem;
           margin: 0;
-        ` : c`
+        ` : a`
           top: 1.28rem;
-          left: 0.8rem;
+          left: ${({ $hasLeftIcon: s }) => s ? "3.52rem" : "0.8rem"};
           font-size: 2.24rem;
         `}
 `, ce = n.div`
@@ -121,7 +129,7 @@ const ie = {
   label: e,
   onChange: o,
   value: r,
-  type: a,
+  type: s,
   hasError: d,
   name: k = "textarea",
   color: j = "blue",
@@ -137,7 +145,7 @@ const ie = {
   placeholder: u,
   ...W
 }) => {
-  const [m, C] = K(!1), g = ne(j), b = Q(null), M = (t) => {
+  const [l, C] = K(!1), g = ne(j), b = Q(null), M = (t) => {
     t.style.height = "";
     const R = t.scrollHeight - t.clientHeight;
     if (R > 0) {
@@ -146,16 +154,16 @@ const ie = {
     }
   }, T = () => C(!0), _ = () => C(!1), D = (t) => {
     z && b.current && M(b.current), o(t);
-  }, S = { color: s.m500, size: 20 }, w = !!f, F = !!h, l = d, N = z, q = y, G = { rows: O }, $ = `textarea-${k}`, I = p ? `${$}-helper` : void 0;
+  }, S = { color: m.m500, size: 20 }, w = !!f, F = !!h, c = d, N = z, q = y, G = { rows: O }, $ = `textarea-${k}`, I = p ? `${$}-helper` : void 0;
   return /* @__PURE__ */ H(me, { children: [
     /* @__PURE__ */ i(
       se,
       {
-        type: a,
+        type: s,
         name: k,
-        $hasError: l,
+        $hasError: c,
         value: r,
-        $isFocused: m,
+        $isFocused: l,
         $shade: g,
         $isDynamic: N,
         $background: q,
@@ -165,7 +173,7 @@ const ie = {
         $isResizeNone: E,
         ...G,
         id: $,
-        "aria-invalid": l ? !0 : void 0,
+        "aria-invalid": c ? !0 : void 0,
         "aria-describedby": I,
         ref: b,
         onFocus: T,
@@ -182,18 +190,18 @@ const ie = {
         {
           as: "label",
           htmlFor: $,
-          $hasError: l,
-          $isFocused: m,
+          $hasError: c,
+          $isFocused: l,
           $shade: g,
           $value: r,
-          $outerBackground: m || r ? A : y,
+          $outerBackground: l || r ? A : y,
           $hasLeftIcon: w,
           $hasRightIcon: F,
           $onlyPh: u && !e,
           children: e || u
         }
       ),
-      p && /* @__PURE__ */ i(ae, { id: I, $hasError: l, $isFocused: m, $shade: g, $hasLeftIcon: w, children: p })
+      p && /* @__PURE__ */ i(ae, { id: I, $hasError: c, $isFocused: l, $shade: g, $hasLeftIcon: w, children: p })
     ] })
   ] });
 };

package/package.json

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