@lax-wp/design-system 0.3.61 → 0.3.62

package/dist/components/forms/debounce-input/DebounceInputField.d.ts

@@ -1,9 +1,11 @@
+import { DebounceInput } from "react-debounce-input";
 import type { LabelType } from "../../data-display/label/Label";
+import type { ComponentProps } from "react";
 /**
  * Props for the DebounceInputField component
  * Drop-in replacement matching the lax-web-portal API
  */
-export type DebounceInputFieldProps = any & {
+export type DebounceInputFieldProps = ComponentProps<typeof DebounceInput> & {
     /** Current value of the input */
     value: string;
     /** Callback function called when the input value changes (debounced) */

package/dist/index.es.js

@@ -18522,66 +18522,69 @@ const FC = ({
   className: u,
   isDarkMode: d,
   ...h
-}) => /* @__PURE__ */ f.jsxs("div", { className: Z("flex flex-col", u), children: [
-  t && /* @__PURE__ */ f.jsxs(
-    "label",
-    {
-      htmlFor: e,
-      className: "block mb-1 text-xs font-medium leading-[18px] text-neutral-600 dark:text-black-300 font-inter capitalize",
-      children: [
-        /* @__PURE__ */ f.jsxs("div", { className: "inline-flex items-center gap-1", children: [
-          t,
-          i && /* @__PURE__ */ f.jsx(Kt, {})
-        ] }),
-        /* @__PURE__ */ f.jsx(Jt, { labels: o })
-      ]
-    }
-  ),
-  /* @__PURE__ */ f.jsx("label", { className: "relative block h-8", children: /* @__PURE__ */ W0(
-    sd.DebounceInput,
-    {
-      ...h,
-      debounceTimeout: c,
-      id: e,
-      key: e,
-      required: i,
-      className: Z(
-        "border",
-        r ? "!border-error-300" : "border-neutral-200 dark:border-black-600",
-        l,
-        s,
-        "dark:bg-black-700 text-neutral-900 dark:text-neutral-100 text-[14px] rounded-md",
-        "focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400",
-        "focus:border-primary-500 dark:focus:border-primary-400",
-        "block w-full h-8 px-3 py-1.5 font-inter font-medium",
-        "disabled:opacity-70 disabled:!bg-neutral-50 dark:disabled:!bg-black-800"
-      ),
-      onChange: (m) => {
-        n(m.target.value);
-      },
-      autoComplete: "off"
-    }
-  ) }),
-  /* @__PURE__ */ f.jsx(Vt, { children: r && /* @__PURE__ */ f.jsx(
-    kt.div,
-    {
-      initial: { opacity: 0, y: -5 },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: -5 },
-      transition: { duration: 0.15 },
-      children: /* @__PURE__ */ f.jsx(
-        se,
-        {
-          className: "pt-1 text-error-500",
-          appearance: "custom",
-          size: "extra-small",
-          variant: "medium",
-          children: r
-        }
-      )
-    }
-  ) })
-] });
+}) => {
+  const { inputRef: m, ...p } = h;
+  return /* @__PURE__ */ f.jsxs("div", { className: Z("flex flex-col", u), children: [
+    t && /* @__PURE__ */ f.jsxs(
+      "label",
+      {
+        htmlFor: e,
+        className: "block mb-1 text-xs font-medium leading-[18px] text-neutral-600 dark:text-black-300 font-inter capitalize",
+        children: [
+          /* @__PURE__ */ f.jsxs("div", { className: "inline-flex items-center gap-1", children: [
+            t,
+            i && /* @__PURE__ */ f.jsx(Kt, {})
+          ] }),
+          /* @__PURE__ */ f.jsx(Jt, { labels: o })
+        ]
+      }
+    ),
+    /* @__PURE__ */ f.jsx("label", { className: "relative block h-8", children: /* @__PURE__ */ W0(
+      sd.DebounceInput,
+      {
+        ...p,
+        debounceTimeout: c,
+        id: e,
+        key: e,
+        required: i,
+        className: Z(
+          "border",
+          r ? "!border-error-300" : "border-neutral-200 dark:border-black-600",
+          l,
+          s,
+          "dark:bg-black-700 text-neutral-900 dark:text-neutral-100 text-[14px] rounded-md",
+          "focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400",
+          "focus:border-primary-500 dark:focus:border-primary-400",
+          "block w-full h-8 px-3 py-1.5 font-inter font-medium",
+          "disabled:opacity-70 disabled:!bg-neutral-50 dark:disabled:!bg-black-800"
+        ),
+        onChange: (g) => {
+          n(g.target.value);
+        },
+        autoComplete: "off"
+      }
+    ) }),
+    /* @__PURE__ */ f.jsx(Vt, { children: r && /* @__PURE__ */ f.jsx(
+      kt.div,
+      {
+        initial: { opacity: 0, y: -5 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -5 },
+        transition: { duration: 0.15 },
+        children: /* @__PURE__ */ f.jsx(
+          se,
+          {
+            className: "pt-1 text-error-500",
+            appearance: "custom",
+            size: "extra-small",
+            variant: "medium",
+            children: r
+          }
+        )
+      }
+    ) })
+  ] });
+};
 FC.displayName = "DebounceInputField";
 const MC = Ue(
   ({