asma-ui-core 3.90.1 → 3.92.0

package/dist/components/feedback/dialog/dialog-footer/StyledDialogFooter.js

@@ -1,36 +1,40 @@
-import { cn as T } from "../../../../helpers/cn.js";
-import { DotsVerticalIcon as O } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
+import { cn as w } from "../../../../helpers/cn.js";
+import { DotsVerticalIcon as S } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
 import { LoadingIcon as $ } from "../../../icons/loading-icon/LoadingIcon.js";
 import { StyledTooltip as z } from "../../../data-display/tooltip/StyledTooltip.js";
-import { StyledButton as w } from "../../../inputs/button/StyledButton.js";
-import { StyledMenu as j } from "../../../navigation/menu/StyledMenu.js";
-import { StyledMenuItem as K } from "../../../navigation/menu/StyledMenuItem.js";
-import { useElementWidthPx as F } from "../../../../hooks/useElementWidthPx.js";
+import { StyledButton as _ } from "../../../inputs/button/StyledButton.js";
+import { StyledMenu as F } from "../../../navigation/menu/StyledMenu.js";
+import { StyledMenuItem as j } from "../../../navigation/menu/StyledMenuItem.js";
+import { useElementWidthPx as K } from "../../../../hooks/useElementWidthPx.js";
 import { useWidthRegistry as H } from "../../../../hooks/useWidthRegistry.js";
-import { planToolbarActions as D } from "../../../custom/module/header-layout/planToolbarActions.js";
-import { ToolbarActionButton as G } from "../../../custom/module/header-layout/ToolbarActionGroup.js";
-import { useToolbarTranslations as U } from "../../../custom/module/header-layout/useTranslations.js";
-import { useMemo as C, useState as X } from "react";
-import { Fragment as _, jsx as r, jsxs as i } from "react/jsx-runtime";
-var Y = 470, V = 8, k = "dialog-footer-right", N = "dialog-footer-more", I = (t, n) => `dialog-footer-action:${t}:${n ? "label" : "icon"}`;
-function ce({ leftActions: t = [], leadingSlot: n, secondaryAction: a, primaryAction: s, fixed: P = !1, rounded: B = !0, locale: E = "en", className: M, dataTest: d = "styled-dialog-footer" }) {
-  const W = U(E), { ref: R, widthPx: c } = F(), { register: m, widths: o } = H(), [p, h] = X(null), g = c > 0 && c < Y, S = g ? 8 : 16, u = C(() => t.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
+import { planToolbarActions as U } from "../../../custom/module/header-layout/planToolbarActions.js";
+import { ToolbarActionButton as D } from "../../../custom/module/header-layout/ToolbarActionGroup.js";
+import { useToolbarTranslations as G } from "../../../custom/module/header-layout/useTranslations.js";
+import { useMemo as y, useState as V } from "react";
+import { Fragment as C, jsx as r, jsxs as l } from "react/jsx-runtime";
+var X = 2, Y = 470, q = 8, N = "dialog-footer-right", M = "dialog-footer-more", O = (n, a) => `dialog-footer-action:${n}:${a ? "label" : "icon"}`;
+function me({ leftActions: n = [], leadingSlot: a, secondaryAction: s, primaryAction: d, fixed: k = !1, rounded: I = !0, locale: A = "en", className: E, dataTest: c = "styled-dialog-footer" }) {
+  const P = G(A), { ref: R, widthPx: m } = K(), { register: h, widths: t } = H(), [p, f] = V(null), u = m > 0 && m < Y, W = u ? 8 : 16, o = y(() => n.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
     ...e,
     canHideLabel: !1
-  } : e), [t]), A = o[k] ?? 0, x = a != null || s != null, v = Math.max(0, c - S * 2 - A - (x ? V : 0)), f = C(() => D({
-    actions: u,
+  } : e), [n]), B = t[N] ?? 0, x = s != null || d != null, v = Math.max(0, m - W * 2 - B - (x ? q : 0)), g = y(() => o.length >= X ? {
+    inlineActions: [],
+    overflowActions: o,
+    showMoreMenu: !0
+  } : U({
+    actions: o,
     availableWidth: v,
     collapseLabels: !0,
-    resolveActionWidth: (e, l) => o[I(e.id, l)],
-    moreButtonWidthPx: o[N]
+    resolveActionWidth: (e, i) => t[O(e.id, i)],
+    moreButtonWidthPx: t[M]
   }), [
-    u,
+    o,
     v,
-    o
-  ]), b = (e, l, L) => {
-    const y = /* @__PURE__ */ r(w, {
-      dataTest: e.dataTest ?? `${d}-${L}`,
-      variant: e.variant ?? l,
+    t
+  ]), b = (e, i, L) => {
+    const T = /* @__PURE__ */ r(_, {
+      dataTest: e.dataTest ?? `${c}-${L}`,
+      variant: e.variant ?? i,
       error: e.tone === "danger",
       size: "medium",
       type: e.type ?? "button",
@@ -50,44 +54,44 @@ function ce({ leftActions: t = [], leadingSlot: n, secondaryAction: a, primaryAc
       title: e.tooltip,
       children: /* @__PURE__ */ r("span", {
         className: "inline-flex",
-        children: y
+        children: T
       })
-    }) : y;
+    }) : T;
   };
-  return /* @__PURE__ */ i("div", {
+  return /* @__PURE__ */ l("div", {
     ref: R,
-    "data-testid": d,
-    className: T("flex items-center justify-end self-stretch border-0 border-t border-solid border-delta-200 bg-white", g ? "gap-2 p-2" : "gap-4 p-4", B && "rounded-b-lg", P && "sticky bottom-0 z-[1] shadow-[0_0_16px_0_rgba(34,33,51,0.2)]", M),
+    "data-testid": c,
+    className: w("flex items-center justify-end self-stretch border-0 border-t border-solid border-delta-200 bg-white", u ? "gap-2 p-2" : "gap-4 p-4", I && "rounded-b-lg", k && "sticky bottom-0 z-[1] shadow-[0_0_16px_0_rgba(34,33,51,0.2)]", E),
     children: [/* @__PURE__ */ r("div", {
       className: "flex shrink-0 flex-nowrap items-center gap-2",
-      children: n ?? /* @__PURE__ */ i(_, { children: [f.inlineActions.map(({ action: e, showLabel: l }) => /* @__PURE__ */ r("span", {
-        ref: m(I(e.id, l)),
+      children: a ?? /* @__PURE__ */ l(C, { children: [g.inlineActions.map(({ action: e, showLabel: i }) => /* @__PURE__ */ r("span", {
+        ref: h(O(e.id, i)),
         className: "inline-flex shrink-0",
-        children: /* @__PURE__ */ r(G, {
+        children: /* @__PURE__ */ r(D, {
           action: e,
-          showLabel: l
+          showLabel: i
         })
-      }, e.id)), f.showMoreMenu && /* @__PURE__ */ i(_, { children: [/* @__PURE__ */ r("span", {
-        ref: m(N),
+      }, e.id)), g.showMoreMenu && /* @__PURE__ */ l(C, { children: [/* @__PURE__ */ r("span", {
+        ref: h(M),
         className: "inline-flex shrink-0",
-        children: /* @__PURE__ */ r(w, {
-          dataTest: `${d}-more`,
+        children: /* @__PURE__ */ r(_, {
+          dataTest: `${c}-more`,
           variant: "outlined",
           size: "medium",
           type: "button",
-          onClick: (e) => h(e.currentTarget),
-          "aria-label": W.more,
+          onClick: (e) => f(e.currentTarget),
+          "aria-label": P.more,
           "aria-haspopup": "menu",
           "aria-expanded": p != null,
-          startIcon: /* @__PURE__ */ r(O, {
+          startIcon: /* @__PURE__ */ r(S, {
             width: 24,
             height: 24
           })
         })
-      }), /* @__PURE__ */ r(j, {
+      }), /* @__PURE__ */ r(F, {
         anchorEl: p,
         open: p != null,
-        onClose: () => h(null),
+        onClose: () => f(null),
         anchorOrigin: {
           vertical: "top",
           horizontal: "left"
@@ -96,27 +100,27 @@ function ce({ leftActions: t = [], leadingSlot: n, secondaryAction: a, primaryAc
           vertical: "bottom",
           horizontal: "left"
         },
-        children: f.overflowActions.map((e) => /* @__PURE__ */ r(K, {
+        children: g.overflowActions.map((e) => /* @__PURE__ */ r(j, {
           disabled: e.disabled,
           onClick: () => {
-            h(null), e.onClick();
+            f(null), e.onClick();
           },
-          children: /* @__PURE__ */ i("div", {
-            className: T("flex items-center gap-2", e.tone === "danger" ? "text-beta-500" : "text-delta-700"),
+          children: /* @__PURE__ */ l("div", {
+            className: w("flex items-center gap-2", e.tone === "danger" ? "text-beta-500" : "text-delta-700"),
             children: [e.icon, /* @__PURE__ */ r("span", { children: e.label })]
           })
         }, e.id))
       })] })] })
     }), x && /* @__PURE__ */ r("span", {
       className: "flex min-w-px flex-1 flex-nowrap items-center justify-end",
-      children: /* @__PURE__ */ i("span", {
-        ref: m(k),
+      children: /* @__PURE__ */ l("span", {
+        ref: h(N),
         className: "flex shrink-0 flex-nowrap items-center gap-2",
-        children: [a && b(a, "outlined", "secondary"), s && b(s, "contained", "primary")]
+        children: [s && b(s, "outlined", "secondary"), d && b(d, "contained", "primary")]
       })
     })]
   });
 }
 export {
-  ce as StyledDialogFooter
+  me as StyledDialogFooter
 };

package/dist/forms/createAsmaFieldController.js

@@ -0,0 +1,70 @@
+import { useCallback as y, useEffect as u, useRef as F } from "react";
+import { useController as S, useFormContext as x } from "react-hook-form";
+var B = 150, P = 20, U = "onAutoFillStart";
+function h(r) {
+  return r == null ? !0 : typeof r == "string" ? r.trim().length === 0 : typeof r == "number" ? Number.isNaN(r) : !1;
+}
+function V(r) {
+  return !(!r || r.required === !1 || r.required == null);
+}
+function X({ getLanguageCode: r, browserAutofill: l = !1 }) {
+  return function({ name: n, control: p, rules: f, helperText: I, requestFocus: s, render: L }) {
+    const d = x(), { field: t, fieldState: i } = S({
+      name: n,
+      control: p ?? d.control,
+      rules: f
+    }), { trigger: a, setValue: A } = d, { ref: o } = t, C = V(f), N = r(), v = F(null), g = (e) => {
+      e != null && e !== t.value && t.onChange(e), a(n);
+    };
+    u(() => {
+      s && o({ focus: s });
+    }, [o, s]), u(() => {
+      i.invalid && a(n);
+    }, [N]), u(() => {
+      l && (h(t.value) || a(n));
+    }, []), u(() => {
+      if (!l) return;
+      let e = 0;
+      const c = setInterval(() => {
+        e += 1;
+        const T = v.current;
+        T?.matches(":-webkit-autofill") ? (g(T.value), clearInterval(c)) : e >= P && clearInterval(c);
+      }, B);
+      return () => clearInterval(c);
+    }, []);
+    const _ = () => {
+      if (!C && h(t.value)) {
+        A(n, t.value, {
+          shouldTouch: !0,
+          shouldValidate: !1
+        });
+        return;
+      }
+      t.onBlur(), a(n);
+    };
+    u(() => {
+      i.error && a(n);
+    }, [t.value]);
+    const R = (...e) => {
+      t.onChange(...e);
+    }, E = (e) => {
+      l && e.animationName === U && g(e.target?.value);
+    }, M = y((e) => {
+      v.current = e, typeof o == "function" && o(e);
+    }, [o]), O = i.error?.message, m = !!i.error && (!l || i.isTouched);
+    return L({
+      value: t.value,
+      onChange: R,
+      onBlur: _,
+      onAnimationStart: E,
+      name: t.name,
+      ref: l ? M : o,
+      error: m,
+      helperText: m ? O : I,
+      reserveHelperText: f != null
+    });
+  };
+}
+export {
+  X as createAsmaFieldController
+};

package/dist/forms/createAsmaForms.js

@@ -0,0 +1,12 @@
+import { createAsmaFieldController as m } from "./createAsmaFieldController.js";
+import { submitChanged as n } from "./submitChanged.js";
+function u(t) {
+  const e = t.browserAutofill === !0, r = (o, i, l) => n(o, i, l, { touchInvalidFields: e });
+  return {
+    AsmaFieldController: m(t),
+    submitChanged: r
+  };
+}
+export {
+  u as createAsmaForms
+};

package/dist/forms/focusFormField.js

@@ -0,0 +1,14 @@
+var n = 'input, textarea, select, button, [contenteditable="true"], [contenteditable=""], [tabindex]';
+function o(t) {
+  return t.matches(n);
+}
+function c(t) {
+  const e = document.getElementById(t) ?? Array.from(document.querySelectorAll("[data-testid]")).find((r) => r.dataset.testid === t);
+  return e ? ((o(e) ? e : e.querySelector(n) ?? e).focus({ preventScroll: !0 }), e.scrollIntoView({
+    behavior: "instant",
+    block: "center"
+  }), !0) : !1;
+}
+export {
+  c as focusFormField
+};

package/dist/forms/getDirtyValues.js

@@ -0,0 +1,24 @@
+function u(e, f) {
+  if (e === !0) return { ...f };
+  if (!e || typeof e != "object") return {};
+  const c = {};
+  for (const n of Object.keys(e)) {
+    const o = e[n], t = f[n];
+    if (o === !0) {
+      c[n] = t;
+      continue;
+    }
+    if (Array.isArray(t)) {
+      o && (c[n] = t);
+      continue;
+    }
+    if (o && typeof o == "object" && t != null && typeof t == "object") {
+      const r = u(o, t);
+      Object.keys(r).length > 0 && (c[n] = r);
+    }
+  }
+  return c;
+}
+export {
+  u as getDirtyValues
+};

package/dist/forms/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/forms/index'
+export {}

package/dist/forms/index.js

@@ -0,0 +1,12 @@
+import { getDirtyValues as r } from "./getDirtyValues.js";
+import { touchInvalidFields as t } from "./touchInvalidFields.js";
+import { createAsmaForms as e } from "./createAsmaForms.js";
+import { focusFormField as f } from "./focusFormField.js";
+import { useAsmaForm as a } from "./useAsmaForm.js";
+export {
+  e as createAsmaForms,
+  f as focusFormField,
+  r as getDirtyValues,
+  t as touchInvalidFields,
+  a as useAsmaForm
+};

package/dist/forms/submitChanged.js

@@ -0,0 +1,11 @@
+import { getDirtyValues as o } from "./getDirtyValues.js";
+import { touchInvalidFields as n } from "./touchInvalidFields.js";
+async function f(t, a, i, e = {}) {
+  if (!(i ? await t.trigger() : await t.trigger(void 0, { shouldFocus: !0 })))
+    return e.touchInvalidFields && n(t), i?.(), !1;
+  const r = t.getValues(), { dirtyFields: u } = t.control._formState, l = await a(o(u, r), r);
+  return t.reset(l ?? r), !0;
+}
+export {
+  f as submitChanged
+};

package/dist/forms/touchInvalidFields.js

@@ -0,0 +1,12 @@
+function l(e) {
+  for (const t of Object.keys(e.control._formState.errors)) {
+    const o = t;
+    e.setValue(o, e.getValues(o), {
+      shouldTouch: !0,
+      shouldValidate: !1
+    });
+  }
+}
+export {
+  l as touchInvalidFields
+};

package/dist/forms/useAsmaForm.js

@@ -0,0 +1,16 @@
+import { useForm as o } from "react-hook-form";
+var e = {
+  mode: "onBlur",
+  reValidateMode: "onSubmit",
+  criteriaMode: "all",
+  shouldFocusError: !0
+};
+function t(r) {
+  return o({
+    ...r,
+    ...e
+  });
+}
+export {
+  t as useAsmaForm
+};

package/dist/src/components/feedback/dialog/dialog-footer/StyledDialogFooter.d.ts

@@ -34,10 +34,11 @@ export interface StyledDialogFooterButton {
 }
 export interface StyledDialogFooterProps {
     /**
-     * Left cluster (Figma "Left"): destructive and utility actions. They keep their
-     * labels while they fit, collapse to icon-only next, and move into an icon-only
-     * "More" menu once even that overflows — so 1, 2, 3 and 3+ actions all resolve to
-     * the approved layout without the caller branching on width.
+     * Left cluster (Figma "Left"): destructive and utility actions.
+     *
+     * One action renders inline, keeping its label while it fits and collapsing to icon-only
+     * when it does not. Two or more always collapse into the icon-only "More" menu, matching
+     * the Figma `More` state — so the caller never branches on count or width itself.
      */
     leftActions?: DynamicToolbarAction[];
     /** Replaces the planned left cluster with arbitrary content — Figma's "Checkbox+Label" left variant, or footer info text. */
@@ -59,15 +60,15 @@ export interface StyledDialogFooterProps {
  *
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#26769-135283
  * @remarks Figma "Dialog footer" component set. The Figma `State` property
- * (Create/Edit/More/Reset filter) is **not** a prop — it is the emergent result of which
- * actions the caller passes and how much room the container leaves, which is the whole
- * point of ASMA-7099. `Mobile` is likewise derived from the **container** width, not the
- * viewport, so a footer inside a narrow popover compacts even on a desktop screen.
+ * (Create/Edit/More/Reset filter) is **not** a prop — it follows from the actions the caller
+ * passes: one left action is `Edit`, two or more is `More`. `Mobile` is derived from the
+ * **container** width, not the viewport, so a footer inside a narrow popover compacts even on
+ * a desktop screen.
  *
  * Layout: `Left` cluster (planned, adaptive) · `Right` cluster (Cancel + primary, always
  * visible and never overflowed — the primary action must stay reachable).
  *
- * @param leftActions - adaptive left cluster; label → icon-only → More menu
+ * @param leftActions - left cluster; one action inline, two or more behind the More menu
  * @param leadingSlot - arbitrary left content, replaces `leftActions`
  * @param secondaryAction - outlined Cancel
  * @param primaryAction - contained primary

package/dist/src/forms/createAsmaFieldController.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement, ReactNode } from 'react';
+import { Control, ControllerRenderProps, FieldPath, FieldPathValue, FieldValues, RegisterOptions } from 'react-hook-form';
+import { AsmaFormsOptions } from './types';
+export interface AutofillAnimationEvent {
+    animationName: string;
+    target: EventTarget | null;
+}
+export interface AsmaFieldRenderProps<TValue = unknown> {
+    value: TValue;
+    onChange: (...event: unknown[]) => void;
+    onBlur: () => void;
+    onAnimationStart: (event: AutofillAnimationEvent) => void;
+    name: string;
+    ref: ControllerRenderProps['ref'];
+    error: boolean;
+    helperText: ReactNode;
+    reserveHelperText: boolean;
+}
+export interface AsmaFieldControllerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    name: TName;
+    control?: Control<TFieldValues>;
+    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
+    helperText?: ReactNode;
+    /** For controls that own their input ref (comboboxes, rich editors): RHF focuses the field through this instead of a DOM node. */
+    requestFocus?: () => void;
+    render: (props: AsmaFieldRenderProps<FieldPathValue<TFieldValues, TName>>) => ReactElement;
+}
+export declare function createAsmaFieldController({ getLanguageCode, browserAutofill, }: AsmaFormsOptions): <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, rules, helperText, requestFocus, render, }: AsmaFieldControllerProps<TFieldValues, TName>) => ReactElement;

package/dist/src/forms/createAsmaForms.d.ts

@@ -0,0 +1,9 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import { createAsmaFieldController } from './createAsmaFieldController';
+import { SubmitChangedPatch } from './submitChanged';
+import { AsmaFormsOptions } from './types';
+export interface AsmaFormsApi {
+    AsmaFieldController: ReturnType<typeof createAsmaFieldController>;
+    submitChanged: <TFieldValues extends FieldValues>(methods: UseFormReturn<TFieldValues>, onPatch: SubmitChangedPatch<TFieldValues>, onInvalid?: () => void) => Promise<boolean>;
+}
+export declare function createAsmaForms(options: AsmaFormsOptions): AsmaFormsApi;

package/dist/src/forms/focusFormField.d.ts

@@ -0,0 +1 @@
+export declare function focusFormField(fieldDomId: string): boolean;

package/dist/src/forms/getDirtyValues.d.ts

@@ -0,0 +1 @@
+export declare function getDirtyValues<T extends Record<string, unknown>>(dirtyFields: Partial<Record<keyof T, unknown>> | boolean | undefined, values: T): Partial<T>;

package/dist/src/forms/index.d.ts

@@ -0,0 +1,8 @@
+export { createAsmaForms } from './createAsmaForms';
+export { focusFormField } from './focusFormField';
+export { getDirtyValues } from './getDirtyValues';
+export { touchInvalidFields } from './touchInvalidFields';
+export { useAsmaForm } from './useAsmaForm';
+export type { AsmaFieldControllerProps, AsmaFieldRenderProps, AutofillAnimationEvent } from './createAsmaFieldController';
+export type { SubmitChangedPatch } from './submitChanged';
+export type { AsmaFormsOptions } from './types';

package/dist/src/forms/submitChanged.d.ts

@@ -0,0 +1,6 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+export type SubmitChangedPatch<TFieldValues extends FieldValues> = (dirty: Partial<TFieldValues>, all: TFieldValues) => Promise<TFieldValues | void>;
+export interface SubmitChangedOptions {
+    touchInvalidFields?: boolean;
+}
+export declare function submitChanged<TFieldValues extends FieldValues>(methods: UseFormReturn<TFieldValues>, onPatch: SubmitChangedPatch<TFieldValues>, onInvalid?: () => void, options?: SubmitChangedOptions): Promise<boolean>;

package/dist/src/forms/touchInvalidFields.d.ts

@@ -0,0 +1,2 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+export declare function touchInvalidFields<TFieldValues extends FieldValues>(methods: UseFormReturn<TFieldValues>): void;

package/dist/src/forms/types.d.ts

@@ -0,0 +1,6 @@
+export interface AsmaFormsOptions {
+    /** Read during every render; a change re-validates already-invalid fields so their message re-renders in the new language. */
+    getLanguageCode: () => string;
+    /** Login/auth forms: mount validation, autofill sync, merged ref, touched-gated errors, touch-on-submit. */
+    browserAutofill?: boolean;
+}

package/dist/src/forms/useAsmaForm.d.ts

@@ -0,0 +1,2 @@
+import { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
+export declare function useAsmaForm<TFieldValues extends FieldValues = FieldValues, TContext = unknown>(props?: UseFormProps<TFieldValues, TContext>): UseFormReturn<TFieldValues, TContext>;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.90.1",
+    "version": "3.92.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",
@@ -26,6 +26,9 @@
             ],
             "icons/*": [
                 "dist/src/components/icons/*/index.d.ts"
+            ],
+            "forms": [
+                "dist/src/forms/index.d.ts"
             ]
         }
     },
@@ -45,6 +48,11 @@
             "types": "./dist/src/components/icons/*/index.d.ts",
             "default": "./dist/components/icons/*/index.js"
         },
+        "./forms": {
+            "types": "./dist/src/forms/index.d.ts",
+            "import": "./dist/forms/index.js",
+            "default": "./dist/forms/index.js"
+        },
         "./dist/style.css": "./dist/style.css",
         "./tw-configs/twConfigs.json": "./tw-configs/twConfigs.json",
         "./src/styles/breakpoints": "./src/styles/_breakpoints.scss"
@@ -102,6 +110,8 @@
         "@storybook/addon-themes": "^10.3.3",
         "@storybook/addon-vitest": "10.3.3",
         "@storybook/react-vite": "10.3.3",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.2",
         "@tippyjs/react": "^4.2.6",
         "@types/node": "^24.12.4",
         "@types/react": "^18.3.23",
@@ -120,10 +130,12 @@
         "eslint-plugin-react-you-might-not-need-an-effect": "^0.7.0",
         "eslint-plugin-regexp": "^2.10.0",
         "eslint-plugin-storybook": "10.3.3",
+        "jsdom": "^30.0.1",
         "playwright": "^1.57.0",
         "react": "^18.3.1",
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18.3.1",
+        "react-hook-form": "^7.89.0",
         "react-hot-toast": "^2.4.1",
         "sass": "^1.98.0",
         "storybook": "10.3.3",
@@ -142,7 +154,13 @@
     },
     "peerDependencies": {
         "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
+        "react-dom": "^18.0.0 || ^19.0.0",
+        "react-hook-form": "^7.85.0"
+    },
+    "peerDependenciesMeta": {
+        "react-hook-form": {
+            "optional": true
+        }
     },
     "repository": {
         "type": "git",