@berenjena/react-dev-panel 2.3.0 → 2.4.0

package/dist/components/Select/index.js

@@ -1,33 +1,51 @@
-import { jsxs as y, Fragment as q, jsx as a } from "react/jsx-runtime";
-import { useRef as x, useState as C, useCallback as z, useEffect as P } from "react";
-import { createPortal as T } from "react-dom";
-import { Icon as j } from "../Icon/index.js";
-import { useDevPanelPosition as B } from "../../store/UIStore.js";
-import { className as F } from "../../utils/className/className.js";
-import '../../assets/index7.css';const W = "_select_ug510_217", U = "_trigger_ug510_222", G = "_open_ug510_271", J = "_value_ug510_275", K = "_placeholder_ug510_284", Q = "_arrow_ug510_288", X = "_dropdownPortal_ug510_303", Y = "_dropdown_ug510_303", Z = "_option_ug510_342", ee = "_selected_ug510_361", te = "_checkbox_ug510_370", ne = "_label_ug510_391", r = {
-  select: W,
-  trigger: U,
-  open: G,
-  value: J,
-  placeholder: K,
-  arrow: Q,
-  dropdownPortal: X,
-  dropdown: Y,
-  option: Z,
-  selected: ee,
-  checkbox: te,
-  label: ne
+import { jsxs as x, Fragment as W, jsx as i } from "react/jsx-runtime";
+import { useRef as P, useState as N, useMemo as U, useCallback as G, useEffect as R } from "react";
+import { createPortal as J } from "react-dom";
+import { Icon as K } from "../Icon/index.js";
+import { useDevPanelPosition as X } from "../../store/UIStore.js";
+import { className as Y } from "../../utils/className/className.js";
+import '../../assets/index7.css';const Z = "_select_15gl5_217", ee = "_trigger_15gl5_222", te = "_open_15gl5_271", ne = "_value_15gl5_275", oe = "_placeholder_15gl5_284", re = "_arrow_15gl5_288", se = "_dropdownPortal_15gl5_303", ce = "_dropdown_15gl5_303", ie = "_searchContainer_15gl5_323", le = "_searchInput_15gl5_329", ae = "_optionsList_15gl5_371", de = "_noResults_15gl5_397", ue = "_option_15gl5_371", pe = "_selected_15gl5_423", he = "_checkbox_15gl5_432", fe = "_label_15gl5_453", r = {
+  select: Z,
+  trigger: ee,
+  open: te,
+  value: ne,
+  placeholder: oe,
+  arrow: re,
+  dropdownPortal: se,
+  dropdown: ce,
+  searchContainer: ie,
+  searchInput: le,
+  optionsList: ae,
+  noResults: de,
+  option: ue,
+  selected: pe,
+  checkbox: he,
+  label: fe
 };
-function ae({ value: f, options: v, onChange: L, disabled: h = !1, multiple: u = !1, placeholder: k = "Select..." }) {
-  const g = B(), w = x(null), p = x(null), E = x(null), [i, m] = C(!1), [_, N] = C({
+function ye({
+  value: f,
+  options: h,
+  onChange: k,
+  disabled: g = !1,
+  multiple: u = !1,
+  placeholder: I = "Select...",
+  searchable: w = !1,
+  searchPlaceholder: V = "Search..."
+}) {
+  const m = X(), _ = P(null), p = P(null), O = P(null), E = P(null), [l, v] = N(!1), [b, L] = N(""), [y, S] = N({
     top: 0,
     left: 0,
     width: 0,
     maxHeight: 200
-  }), d = u ? Array.isArray(f) ? f : [] : typeof f == "string" ? f : "", D = A(), S = u ? d.length === 0 : !d, c = z(() => {
-    i && N(O());
-  }, [i]);
-  function O() {
+  }), d = u ? Array.isArray(f) ? f : [] : typeof f == "string" ? f : "", $ = T(), q = u ? d.length === 0 : !d, H = U(() => {
+    if (!w || !b)
+      return h;
+    const e = b.toLowerCase();
+    return h.filter((t) => (typeof t == "string" ? t : t.label).toLowerCase().includes(e));
+  }, [h, w, b]), c = G(() => {
+    l && S(D());
+  }, [l]);
+  function D() {
     if (!p.current)
       return {
         top: 0,
@@ -35,46 +53,49 @@ function ae({ value: f, options: v, onChange: L, disabled: h = !1, multiple: u =
         width: 0,
         maxHeight: 200
       };
-    const e = p.current.getBoundingClientRect(), t = window.innerHeight, n = window.innerWidth, o = 200, l = 4, s = t - e.bottom - l, b = e.top - l, H = s < o && b > s, $ = H ? e.top - Math.min(o, b) : e.bottom + l, I = Math.max(8, Math.min(e.left, n - e.width - 8)), M = H ? Math.min(o, b) : Math.min(o, s);
+    const e = p.current.getBoundingClientRect(), t = window.innerHeight, n = window.innerWidth, o = 200, a = 4, s = t - e.bottom - a, C = e.top - a, M = s < o && C > s, B = M ? e.top - Math.min(o, C) : e.bottom + a, F = Math.max(8, Math.min(e.left, n - e.width - 8)), Q = M ? Math.min(o, C) : Math.min(o, s);
     return {
-      top: $,
-      left: I,
+      top: B,
+      left: F,
       width: e.width,
-      maxHeight: M
+      maxHeight: Q
     };
   }
-  function R(e) {
+  function A(e) {
     if (u) {
       const t = d, n = t.includes(e) ? t.filter((o) => o !== e) : [...t, e];
-      L(n);
+      k(n);
     } else
-      L(e), m(!1);
+      k(e), v(!1);
   }
-  function A() {
+  function T() {
     if (u) {
       const e = d;
       if (e.length === 0)
-        return k;
+        return I;
       if (e.length === 1) {
-        const t = v.find((o) => (typeof o == "string" ? o : o.value) === e[0]);
+        const t = h.find((o) => (typeof o == "string" ? o : o.value) === e[0]);
         return (typeof t == "string" ? t : t?.label) || e[0];
       }
       return `${e.length} selected`;
     } else {
       const e = d;
       if (!e)
-        return k;
-      const t = v.find((o) => (typeof o == "string" ? o : o.value) === e);
+        return I;
+      const t = h.find((o) => (typeof o == "string" ? o : o.value) === e);
       return (typeof t == "string" ? t : t?.label) || e;
     }
   }
-  function V() {
-    h || (i ? m(!1) : (N(O()), m(!0)));
+  function z() {
+    g || (l ? (v(!1), L("")) : (S(D()), v(!0), L(""), w && setTimeout(() => O.current?.focus(), 0)));
   }
-  return P(() => {
-    if (!i) return;
+  function j(e) {
+    L(e.target.value);
+  }
+  return R(() => {
+    if (!l) return;
     c(), window.addEventListener("resize", c), window.addEventListener("scroll", c, !0);
-    const e = w.current?.closest("[data-dev-panel]") || document.querySelector("[data-dev-panel]");
+    const e = _.current?.closest("[data-dev-panel]") || document.querySelector("[data-dev-panel]");
     e && e.addEventListener("scroll", c, !0);
     let t = null;
     if (p.current && "IntersectionObserver" in window) {
@@ -86,9 +107,9 @@ function ae({ value: f, options: v, onChange: L, disabled: h = !1, multiple: u =
       };
       t = new IntersectionObserver(
         (o) => {
-          const l = o[0];
-          if (l && l.target === p.current) {
-            const s = l.boundingClientRect;
+          const a = o[0];
+          if (a && a.target === p.current) {
+            const s = a.boundingClientRect;
             (s.top !== n.top || s.left !== n.left || s.width !== n.width || s.height !== n.height) && (n.top = s.top, n.left = s.left, n.width = s.width, n.height = s.height, c());
           }
         },
@@ -100,73 +121,87 @@ function ae({ value: f, options: v, onChange: L, disabled: h = !1, multiple: u =
     return () => {
       window.removeEventListener("resize", c), window.removeEventListener("scroll", c, !0), e && e.removeEventListener("scroll", c, !0), t && t.disconnect();
     };
-  }, [i, c]), P(() => {
+  }, [l, c]), R(() => {
     const e = E.current;
-    (!e || e.x !== g.x || e.y !== g.y) && (E.current = g, i && requestAnimationFrame(c));
-  }, [i, g, c]), P(() => {
+    (!e || e.x !== m.x || e.y !== m.y) && (E.current = m, l && requestAnimationFrame(c));
+  }, [l, m, c]), R(() => {
     function e(t) {
-      if (w.current && !w.current.contains(t.target)) {
+      if (_.current && !_.current.contains(t.target)) {
         const n = document.querySelector(`.${r.dropdownPortal}`);
         if (n && n.contains(t.target))
           return;
-        m(!1);
+        v(!1);
       }
     }
     return document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, []), /* @__PURE__ */ y(q, { children: [
-    /* @__PURE__ */ a(
+  }, []), /* @__PURE__ */ x(W, { children: [
+    /* @__PURE__ */ i(
       "div",
       {
-        ref: w,
-        ...F(r.select, {
-          [r.disabled]: h,
-          [r.open]: i
+        ref: _,
+        ...Y(r.select, {
+          [r.disabled]: g,
+          [r.open]: l
         }),
-        children: /* @__PURE__ */ y("button", { ref: p, type: "button", className: r.trigger, onClick: V, disabled: h, children: [
-          /* @__PURE__ */ a("span", { className: `${r.value} ${S ? r.placeholder : ""}`, children: D }),
-          /* @__PURE__ */ a(j, { name: "ArrowDown", className: r.arrow })
+        children: /* @__PURE__ */ x("button", { ref: p, type: "button", className: r.trigger, onClick: z, disabled: g, children: [
+          /* @__PURE__ */ i("span", { className: `${r.value} ${q ? r.placeholder : ""}`, children: $ }),
+          /* @__PURE__ */ i(K, { name: "ArrowDown", className: r.arrow })
         ] })
       }
     ),
-    typeof window < "u" && T(
-      i && !h && /* @__PURE__ */ a(
+    typeof window < "u" && J(
+      l && !g && /* @__PURE__ */ i(
         "div",
         {
           className: r.dropdownPortal,
           style: {
             position: "fixed",
-            top: _.top,
-            left: _.left,
-            width: _.width,
-            maxHeight: _.maxHeight,
+            top: y.top,
+            left: y.left,
+            width: y.width,
+            maxHeight: y.maxHeight,
             zIndex: 9999
           },
-          children: /* @__PURE__ */ a("div", { className: r.dropdown, children: v.map((e) => {
-            const t = typeof e == "string" ? e : e.value, n = typeof e == "string" ? e : e.label, o = u ? d.includes(t) : d === t;
-            return u ? /* @__PURE__ */ y("label", { className: r.option, children: [
-              /* @__PURE__ */ a(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: o,
-                  onChange: () => R(t),
-                  className: r.checkbox
-                }
-              ),
-              /* @__PURE__ */ a("span", { className: r.label, children: n })
-            ] }, t) : /* @__PURE__ */ a(
-              "button",
+          children: /* @__PURE__ */ x("div", { className: r.dropdown, children: [
+            w && /* @__PURE__ */ i("div", { className: r.searchContainer, children: /* @__PURE__ */ i(
+              "input",
               {
-                type: "button",
-                className: `${r.option} ${o ? r.selected : ""}`,
-                onClick: () => R(t),
-                children: n
-              },
-              t
-            );
-          }) })
+                ref: O,
+                type: "text",
+                className: r.searchInput,
+                placeholder: V,
+                value: b,
+                onChange: j,
+                onClick: (e) => e.stopPropagation()
+              }
+            ) }),
+            /* @__PURE__ */ i("div", { className: r.optionsList, children: H.length === 0 ? /* @__PURE__ */ i("div", { className: r.noResults, children: "No results found" }) : H.map((e) => {
+              const t = typeof e == "string" ? e : e.value, n = typeof e == "string" ? e : e.label, o = u ? d.includes(t) : d === t;
+              return u ? /* @__PURE__ */ x("label", { className: r.option, children: [
+                /* @__PURE__ */ i(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: o,
+                    onChange: () => A(t),
+                    className: r.checkbox
+                  }
+                ),
+                /* @__PURE__ */ i("span", { className: r.label, children: n })
+              ] }, t) : /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  className: `${r.option} ${o ? r.selected : ""}`,
+                  onClick: () => A(t),
+                  children: n
+                },
+                t
+              );
+            }) })
+          ] })
         }
       ),
       document.body
@@ -174,5 +209,5 @@ function ae({ value: f, options: v, onChange: L, disabled: h = !1, multiple: u =
   ] });
 }
 export {
-  ae as Select
+  ye as Select
 };

package/dist/utils/copyToClipboard/copyToClipboard.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copies text to clipboard with optional feedback timing
+ *
+ * @param text - The text to copy to clipboard
+ * @returns Promise that resolves when text is copied, rejects if copy fails
+ *
+ * @example
+ * ```typescript
+ * try {
+ *   await copyToClipboard("Hello World", 2000);
+ *   console.log("Copied!");
+ * } catch {
+ *   console.error("Failed to copy");
+ * }
+ * ```
+ */
+export declare function copyToClipboard(text: string): Promise<void>;

package/dist/utils/copyToClipboard/copyToClipboard.js

@@ -0,0 +1,10 @@
+async function t(o) {
+  try {
+    await navigator.clipboard.writeText(o);
+  } catch (r) {
+    throw new Error(`Failed to copy to clipboard: ${r instanceof Error ? r.message : String(r)}`);
+  }
+}
+export {
+  t as copyToClipboard
+};

package/dist/utils/copyToClipboard/index.d.ts

@@ -0,0 +1 @@
+export { copyToClipboard } from './copyToClipboard';

package/dist/utils/copyToClipboard/index.js

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

package/dist/utils/getStringPreview/getStringPreview.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Returns a truncated preview of a string with ellipsis suffix if it exceeds max length
+ *
+ * @param text - The text to get preview from
+ * @param maxLength - Maximum length before truncating (default: 100)
+ * @returns Truncated text with "..." suffix if longer than maxLength, original text otherwise
+ *
+ * @example
+ * ```typescript
+ * getStringPreview("Hello World", 5) // Returns "Hello..."
+ * getStringPreview("Hi", 5) // Returns "Hi"
+ * ```
+ */
+export declare function getStringPreview(text: string, maxLength?: number): string;

package/dist/utils/getStringPreview/getStringPreview.js

@@ -0,0 +1,6 @@
+function i(r, e = 100) {
+  return r.length <= e ? r : r.slice(0, e) + "...";
+}
+export {
+  i as getStringPreview
+};

package/dist/utils/getStringPreview/index.d.ts

@@ -0,0 +1 @@
+export { getStringPreview } from './getStringPreview';

package/dist/utils/getStringPreview/index.js

@@ -0,0 +1,4 @@
+import { getStringPreview as t } from "./getStringPreview.js";
+export {
+  t as getStringPreview
+};

package/dist/utils/prettifyJson/index.d.ts

@@ -0,0 +1 @@
+export { prettifyJson } from './prettifyJson';

package/dist/utils/prettifyJson/index.js

@@ -0,0 +1,4 @@
+import { prettifyJson as t } from "./prettifyJson.js";
+export {
+  t as prettifyJson
+};

package/dist/utils/prettifyJson/prettifyJson.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Prettifies a JSON string by formatting it with indentation or returning it as-is if not valid JSON
+ *
+ * @param value - The JSON string to prettify
+ * @returns Prettified JSON string or original value if parsing fails
+ *
+ * @example
+ * ```typescript
+ * prettifyJson('{"name":"John"}') // Returns '{\n  "name": "John"\n}'
+ * prettifyJson('invalid') // Returns 'invalid'
+ * ```
+ */
+export declare function prettifyJson(value: string): string;

package/dist/utils/prettifyJson/prettifyJson.js

@@ -0,0 +1,11 @@
+function n(r) {
+  try {
+    const t = JSON.parse(r);
+    return JSON.stringify(t, null, 2);
+  } catch {
+    return r;
+  }
+}
+export {
+  n as prettifyJson
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"private": false,
-	"version": "2.3.0",
+	"version": "2.4.0",
 	"license": "MIT",
 	"name": "@berenjena/react-dev-panel",
 	"description": "A React development panel with various tools and utilities.",
@@ -65,9 +65,12 @@
 		"test": "vitest",
 		"test:ui": "vitest --ui",
 		"coverage": "vitest run --coverage",
-		"prepublishOnly": "vitest run && npm run build",
+		"size": "size-limit",
+		"size:analyze": "npm run build && size-limit --json > .size-limit-output.json && node scripts/analyze-bundle.js",
+		"size:watch": "bundlewatch",
+		"prepublishOnly": "vitest run && npm run build && npm run size",
 		"changeset": "changeset",
-		"prerelease": "vitest run && npm run build",
+		"prerelease": "vitest run && npm run build && npm run size",
 		"release": "changeset publish",
 		"prepare": "npx husky",
 		"commit": "git-cz"
@@ -86,6 +89,7 @@
 		"@commitlint/cz-commitlint": "^19.8.1",
 		"@eslint/js": "^9.32.0",
 		"@rollup/plugin-terser": "^0.4.4",
+		"@size-limit/preset-small-lib": "^12.0.0",
 		"@storybook/addon-docs": "^9.1.0",
 		"@storybook/react-vite": "^9.1.0",
 		"@types/node": "^24.1.0",
@@ -94,6 +98,7 @@
 		"@vitejs/plugin-react-swc": "^3.11.0",
 		"@vitest/coverage-v8": "^3.2.4",
 		"@vitest/ui": "^3.2.4",
+		"bundlewatch": "^0.4.1",
 		"commitizen": "^4.3.1",
 		"eslint": "^9.32.0",
 		"eslint-plugin-react": "^7.37.5",
@@ -109,6 +114,7 @@
 		"react": "^19.1.1",
 		"react-dom": "^19.1.1",
 		"sass-embedded": "^1.89.2",
+		"size-limit": "^12.0.0",
 		"storybook": "^9.1.0",
 		"stylelint": "^16.23.0",
 		"typescript": "^5.9.2",