meticulous-ui 3.11.8 → 3.12.1

package/components/Accordion/Accordion.js

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

package/components/Accordion/index.js

@@ -0,0 +1,4 @@
+import r from "./Accordion.js";
+export {
+  r as default
+};

package/index.d.ts

@@ -49,6 +49,42 @@ export type ThemeColor =
 
 export type ComponentSize = 'small' | 'medium' | 'large';
 
+// ---------------------------------------------------------------------------
+// Accordion
+// ---------------------------------------------------------------------------
+
+export interface AccordionItem {
+  id: string | number;
+  title: React.ReactNode;
+  content: React.ReactNode;
+  icon?: React.ReactNode;
+  /** Color applied to the icon — defaults to black.m700 */
+  iconColor?: string;
+  /** Background color of the icon box for this item — overrides accordion-level iconBackground */
+  iconBackground?: string;
+}
+
+export interface AccordionProps {
+  items?: AccordionItem[];
+  allowMultiple?: boolean;
+  /** Background color applied to the expanded item — use a palette token e.g. blue.m50 */
+  activeBackground?: string;
+  /** Default icon color for all items — overridden per-item via item.iconColor. Defaults to black.m700 */
+  iconColor?: string;
+  /** Default icon box background for all items — overridden per-item via item.iconBackground */
+  iconBackground?: string;
+  /** Background color for resting (closed) items. Defaults to '#fff' — use a palette token e.g. blueGray.m800 for dark mode */
+  itemBackground?: string;
+  /** Border color for all items — use a palette token e.g. blueGray.m600 for dark mode */
+  itemBorderColor?: string;
+  /** Title and chevron text color — use a light palette token e.g. blueGray.m100 for dark mode */
+  titleColor?: string;
+  /** Body content text color — use a muted light token e.g. blueGray.m300 for dark mode */
+  bodyColor?: string;
+}
+
+export declare const Accordion: React.FC<AccordionProps>;
+
 // ---------------------------------------------------------------------------
 // Link
 // ---------------------------------------------------------------------------
@@ -1452,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/index.js

@@ -12,8 +12,8 @@ import { default as h } from "./components/Link/Link.js";
 import { default as E } from "./components/Modal/Modal.js";
 import { default as L } from "./components/Timer/Timer.js";
 import { default as v } from "./components/Shimmer/Shimmer.js";
-import { default as O } from "./components/VideoPlayer/VideoPlayer.js";
-import { default as A } from "./components/Image/Image.js";
+import { default as A } from "./components/VideoPlayer/VideoPlayer.js";
+import { default as z } from "./components/Image/Image.js";
 import { default as N } from "./components/Carousel/Carousel.js";
 import { default as R } from "./components/Typography/Headings/index.js";
 import { default as G } from "./components/Typography/P/P.js";
@@ -39,8 +39,8 @@ import { default as he } from "./utils/groupBy.js";
 import { default as Ee } from "./utils/hasEqualProps.js";
 import { default as Le } from "./utils/addDays.js";
 import { default as ve } from "./utils/countdown.js";
-import { default as Oe } from "./utils/differenceInDays.js";
-import { default as Ae } from "./utils/isEmpty.js";
+import { default as Ae } from "./utils/differenceInDays.js";
+import { default as ze } from "./utils/isEmpty.js";
 import { default as Ne } from "./utils/isEqual.js";
 import { default as Re } from "./utils/isNonEmptyArray.js";
 import { default as Ge } from "./utils/isPast.js";
@@ -66,7 +66,7 @@ import { default as Co } from "./utils/titleCase.js";
 import { default as Io } from "./utils/truncate.js";
 import { default as wo } from "./utils/uniqueBy.js";
 import { default as Bo } from "./utils/isEmail.js";
-import { default as zo } from "./utils/isPhone.js";
+import { default as Oo } from "./utils/isPhone.js";
 import { default as Fo } from "./utils/isURL.js";
 import { default as Do } from "./utils/isPasswordStrong.js";
 import { default as qo } from "./utils/isPAN.js";
@@ -93,7 +93,7 @@ import { default as Ca } from "./utils/setQueryParam.js";
 import { default as Ia } from "./utils/removeQueryParam.js";
 import { default as wa } from "./utils/buildURL.js";
 import { default as Ba } from "./utils/redirectTo.js";
-import { default as za } from "./utils/getCurrentPath.js";
+import { default as Oa } from "./utils/getCurrentPath.js";
 import { default as Fa } from "./utils/isActiveRoute.js";
 import { default as Da } from "./utils/setLocalStorage.js";
 import { default as qa } from "./utils/getLocalStorage.js";
@@ -120,7 +120,7 @@ import { default as Ct } from "./utils/trapFocus.js";
 import { default as It } from "./utils/generateAriaId.js";
 import { default as wt } from "./utils/handleKeyboardNavigation.js";
 import { default as Bt } from "./utils/logError.js";
-import { default as zt } from "./utils/captureException.js";
+import { default as Ot } from "./utils/captureException.js";
 import { default as Ft } from "./utils/safeJSONParse.js";
 import { default as Dt } from "./utils/safeJSONStringify.js";
 import { default as qt } from "./utils/fallback.js";
@@ -147,7 +147,7 @@ import { default as Cr } from "./utils/fadeIn.js";
 import { default as Ir } from "./utils/fadeOut.js";
 import { default as wr } from "./utils/smoothScroll.js";
 import { default as Br } from "./utils/waitForTransitionEnd.js";
-import { default as zr } from "./utils/trackEvent.js";
+import { default as Or } from "./utils/trackEvent.js";
 import { default as Fr } from "./utils/trackPageView.js";
 import { default as Dr } from "./utils/measurePerformance.js";
 import { default as qr } from "./utils/featureGate.js";
@@ -173,8 +173,8 @@ import { default as hf } from "./hooks/useLocalStorage.js";
 import { default as Ef } from "./hooks/useSessionStorage.js";
 import { default as Lf } from "./hooks/useOutsideClick.js";
 import { default as vf } from "./hooks/useWindowSize.js";
-import { default as Of } from "./hooks/useOnlineStatus.js";
-import { default as Af } from "./hooks/useCopyToClipboard.js";
+import { default as Af } from "./hooks/useOnlineStatus.js";
+import { default as zf } from "./hooks/useCopyToClipboard.js";
 import { default as Nf } from "./hooks/useToggle.js";
 import { default as Rf } from "./hooks/useTimeout.js";
 import { default as Gf } from "./hooks/useInterval.js";
@@ -193,7 +193,9 @@ import { default as ms } from "./components/Input/Checkbox/Checkbox.js";
 import { default as ps } from "./components/Input/RadioGroup/RadioGroup.js";
 import { default as ns } from "./components/Input/FileUploader/FileUploader.js";
 import { default as cs } from "./components/Switch/Switch.js";
+import { default as Ss } from "./components/Accordion/Accordion.js";
 export {
+  Ss as Accordion,
   k as Button,
   N as Carousel,
   ms as Checkbox,
@@ -202,7 +204,7 @@ export {
   ns as FileUploader,
   U as Form,
   R as Headings,
-  A as Image,
+  z as Image,
   fs as Input,
   h as Link,
   m as Loader,
@@ -222,7 +224,7 @@ export {
   L as Timer,
   r as Toast,
   f as ToastContainer,
-  O as VideoPlayer,
+  A as VideoPlayer,
   Le as addDays,
   bt as announceToScreenReader,
   Jr as auditLog,
@@ -231,7 +233,7 @@ export {
   ir as cancelablePromise,
   K as capFirstLetter,
   X as capitalize,
-  zt as captureException,
+  Ot as captureException,
   $ as chunk,
   oe as clamp,
   Ha as clearStorage,
@@ -247,7 +249,7 @@ export {
   fe as deepClone,
   sf as deepFreeze,
   yt as detectOutsideClick,
-  Oe as differenceInDays,
+  Ae as differenceInDays,
   da as downloadFile,
   Cr as fadeIn,
   Ir as fadeOut,
@@ -265,7 +267,7 @@ export {
   gr as fuzzySearch,
   It as generateAriaId,
   Te as generateInitials,
-  za as getCurrentPath,
+  Oa as getCurrentPath,
   ke as getGreetingByTime,
   ga as getJsonContentAsQr,
   qa as getLocalStorage,
@@ -285,7 +287,7 @@ export {
   Mt as isAuthenticated,
   ra as isDarkMode,
   Bo as isEmail,
-  Ae as isEmpty,
+  ze as isEmpty,
   Ne as isEqual,
   _t as isFeatureEnabled,
   Jo as isGST,
@@ -296,7 +298,7 @@ export {
   qo as isPAN,
   Do as isPasswordStrong,
   Ge as isPast,
-  zo as isPhone,
+  Oo as isPhone,
   Vo as isRequired,
   aa as isSafari,
   Qe as isToday,
@@ -362,13 +364,13 @@ export {
   bo as timeAgo,
   Co as titleCase,
   it as toggleFullscreen,
-  zr as trackEvent,
+  Or as trackEvent,
   Fr as trackPageView,
   Ct as trapFocus,
   Io as truncate,
   wo as uniqueBy,
   xt as unlockBodyScroll,
-  Af as useCopyToClipboard,
+  zf as useCopyToClipboard,
   df as useDebounce,
   Sf as useEventListener,
   Uf as useFirstRender,
@@ -377,7 +379,7 @@ export {
   cf as useIsMounted,
   hf as useLocalStorage,
   kf as useMediaQuery,
-  Of as useOnlineStatus,
+  Af as useOnlineStatus,
   Lf as useOutsideClick,
   uf as usePrevious,
   Ef as useSessionStorage,

package/package.json

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

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
 };