meticulous-ui 3.12.0 → 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/index.d.ts

@@ -1488,28 +1488,32 @@ export declare function getQrAsJsonContent(source: QrSource): Promise<QrJsonResu
 
 export interface RecognizeImageResult {
   success: boolean;
-  /** Whether the TextDetector API is available in this browser. */
-  supported?: boolean;
   /** BCP-47 code of the primary language used for recognition. */
   detectedLanguage?: string;
-  /** Full extracted text, newline-separated by detected region. */
+  /** Full extracted text from OCR, newline-separated by detected region. */
   text?: string;
-  /** OCR confidence score 0–100, or null when not available. */
+  /** OCR confidence score 0–100. */
   confidence?: number | null;
-  /** Raw per-region data including bounding boxes and corner points. */
-  rawJson?: Array<{
-    rawValue: string;
-    boundingBox: { x: number; y: number; width: number; height: number };
-    cornerPoints: Array<{ x: number; y: number }>;
-  }>;
+  /**
+   * All readable lines from the OCR output as a key-value object.
+   * Lines matching `ALL-CAPS KEY : value` use the label as the key.
+   * Lines without a recognisable label are assigned generic keys (`param_1`, `param_2`, …).
+   * Continuation lines (e.g. a wrapped address) are appended to the previous key.
+   */
+  fields?: Record<string, string>;
+  /** Raw Tesseract output including per-word bounding boxes and metadata. */
+  rawJson?: object;
   /** Human-readable error when success is false. */
   error?: string;
 }
 
 /**
- * Detect text in a base64 image using the browser-native TextDetector API.
- * No external dependencies or network requests.
- * Supported in Chrome 70+ and Edge 79+; returns supported:false on other browsers.
+ * Runs OCR on a base64 image in all browsers with no npm dependency.
+ * Powered by Tesseract.js loaded on demand from a CDN (fetched once, then
+ * browser-cached). Preprocesses the image (grayscale + 2× upscale + contrast
+ * boost) before recognition for higher accuracy. Returns structured `fields`
+ * with extracted key-value pairs alongside the raw `text`, `confidence` score,
+ * and `rawJson` with full word-level bounding-box metadata.
  */
 export declare function recognizeImageContent(
   base64Image: string,

package/package.json

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

package/utils/getImageContentAsJson.js

@@ -1,4 +1,62 @@
-const l = {
+const b = (l) => new Promise((n, s) => {
+  const o = new Image();
+  o.onload = () => {
+    const r = document.createElement("canvas");
+    r.width = o.width * 2, r.height = o.height * 2;
+    const e = r.getContext("2d");
+    e.filter = "grayscale(1) contrast(1.8)", e.drawImage(o, 0, 0, r.width, r.height), n(r.toDataURL("image/png"));
+  }, o.onerror = s, o.src = l;
+}), u = (l) => {
+  var r;
+  const n = ((r = l.words) != null ? r : []).map((e) => {
+    var t;
+    return { text: (t = e.text) == null ? void 0 : t.trim(), bbox: e.bbox };
+  }).filter((e) => e.text && e.bbox);
+  if (!n.length) return [];
+  const s = [];
+  for (const e of n) {
+    const t = (e.bbox.y0 + e.bbox.y1) / 2, c = (e.bbox.y1 - e.bbox.y0) / 2;
+    let a = s.find((m) => Math.abs(m.cy - t) < c);
+    a || (a = { cy: t, words: [] }, s.push(a)), a.words.push(e);
+  }
+  const o = [];
+  for (const e of s) {
+    const t = e.words.slice().sort((i, x) => i.bbox.x0 - x.bbox.x0), c = t.slice(1).map((i, x) => i.bbox.x0 - t[x].bbox.x1), a = c.length ? c.reduce((i, x) => i + x, 0) / c.length : 0, m = Math.max(a * 3, (t[0].bbox.y1 - t[0].bbox.y0) * 1.5);
+    let d = [t[0]];
+    for (let i = 1; i < t.length; i++)
+      t[i].bbox.x0 - t[i - 1].bbox.x1 > m && (o.push({
+        text: d.map((x) => x.text).join(" "),
+        y: e.cy,
+        x: d[0].bbox.x0
+      }), d = []), d.push(t[i]);
+    o.push({
+      text: d.map((i) => i.text).join(" "),
+      y: e.cy,
+      x: d[0].bbox.x0
+    });
+  }
+  return o.sort((e, t) => e.y - t.y || e.x - t.x), o.map((e) => e.text);
+}, h = (l) => {
+  const n = {};
+  let s = null, o = 0;
+  const r = (e) => {
+    let t = e.replace(/^[^A-Za-z0-9"'(]+/, "").trim();
+    return t = t.replace(/[^A-Za-z0-9"')]+$/, "").trim(), t = t.replace(/^[A-Za-z]{1,3}\s+(?=\d)/, ""), t;
+  };
+  for (const e of l) {
+    const t = r(e.trim());
+    if (!t) {
+      s = null;
+      continue;
+    }
+    const c = t.match(/\b([A-Z][A-Z.]{0,}(?:\s+[A-Z.]+){0,2})\s*[:©]\s*(.+)/);
+    if (c) {
+      const a = c[1].trim();
+      n[a] = c[2].trim(), s = a;
+    } else s && /^[A-Z0-9][A-Z0-9\s.,'\-]+$/.test(t) ? (n[s] += " " + t, s = null) : (/\w{3,}/.test(t) && (n[`param_${++o}`] = t), s = null);
+  }
+  return n;
+}, g = {
   en: "eng",
   hi: "hin",
   fr: "fra",
@@ -17,37 +75,40 @@ const l = {
   vi: "vie",
   th: "tha",
   id: "ind"
-}, d = (t) => t.map((r) => {
-  var e;
-  return (e = l[r]) != null ? e : r;
+}, f = (l) => l.map((n) => {
+  var s;
+  return (s = g[n]) != null ? s : n;
 }).join("+");
-let s = null;
-const u = () => (s || (s = import(
+let p = null;
+const y = () => (p || (p = import(
   /* webpackIgnore: true */
   /* @vite-ignore */
   "https://esm.sh/tesseract.js@5"
-)), s), p = async (t, r = "en") => {
-  var e;
+)), p), w = async (l, n = "en") => {
+  var s;
   try {
-    const a = t.startsWith("data:") ? t : `data:image/png;base64,${t}`, o = r.split("+").filter(Boolean), { createWorker: i } = await u(), c = await i(d(o));
+    const o = l.startsWith("data:") ? l : `data:image/png;base64,${l}`, r = n.split("+").filter(Boolean), e = await b(o), { createWorker: t } = await y(), c = await t(f(r));
     try {
-      const { data: n } = await c.recognize(a);
+      await c.setParameters({ tessedit_pageseg_mode: "3" });
+      const { data: a } = await c.recognize(e), m = a.text.trim();
       return {
         success: !0,
-        detectedLanguage: (e = o[0]) != null ? e : "en",
-        text: n.text.trim(),
-        confidence: n.confidence,
+        detectedLanguage: (s = r[0]) != null ? s : "en",
+        text: m,
+        confidence: a.confidence,
         // 0–100
-        rawJson: n
+        fields: h(u(a)),
+        // structured key-value extraction, split on bbox gaps
+        rawJson: a
         // full metadata: words, blocks, bounding boxes
       };
     } finally {
       await c.terminate();
     }
-  } catch (a) {
-    return { success: !1, error: a.message };
+  } catch (o) {
+    return { success: !1, error: o.message };
   }
 };
 export {
-  p as default
+  w as default
 };