@dotss/ui 1.3.1 → 1.5.0

package/Tooltip/Tooltip.es.js

@@ -1,22 +1,22 @@
-import { jsxs as S, jsx as h } from "@emotion/react/jsx-runtime";
-import { forwardRef as V, useId as B, useRef as L, useState as W, useEffect as w, Children as G, isValidElement as J, cloneElement as Q } from "react";
-import $ from "../Flexbox/Flexbox.es.js";
-import C from "../Icon/Icon.es.js";
-import U from "../Typography/Typography.es.js";
-import Z from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
-import z from "@emotion/styled";
-const _ = z.div`
+import { jsxs as R, jsx as $ } from "@emotion/react/jsx-runtime";
+import { forwardRef as V, useId as w, useRef as L, useState as G, useEffect as I, Children as J, isValidElement as Q, cloneElement as U } from "react";
+import g from "../Flexbox/Flexbox.es.js";
+import z from "../Icon/Icon.es.js";
+import Z from "../Typography/Typography.es.js";
+import _ from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import D from "@emotion/styled";
+const A = D.div`
   position: relative;
   display: inline-block;
   &[open] > [role='dialog'] {
     display: flex;
   }
-`, A = z.div`
+`, O = D.div`
   position: absolute;
   display: none;
   flex-direction: column;
-  gap: ${({ theme: { spacing: t } }) => `${t.content(1)}px`};
-  padding: ${({ theme: { spacing: t } }) => `${t.content(3)}px`};
+  gap: ${({ theme: { spacing: e } }) => `${e.content(1)}px`};
+  padding: ${({ theme: { spacing: e } }) => `${e.content(3)}px`};
   border-radius: 8px;
   width: auto;
   height: auto;
@@ -26,56 +26,71 @@ const _ = z.div`
   white-space: nowrap;
   word-break: break-all;
 
+  & svg:not(.tooltip-closer) {
+    width: 24,
+    height: 24
+  }
+
   ${({
   theme: {
-    palette: { brand: t, grey: r }
+    palette: { brand: e, grey: t }
   },
-  color: m
+  color: c
 }) => {
-  let e = {};
-  return m === "primary" && (e = {
-    backgroundColor: t.primary.tooltip,
-    color: r[100]
-  }), m === "secondary" && (e = {
-    backgroundColor: r[80],
-    color: r.white
-  }), e;
+  if (c === "primary")
+    return {
+      backgroundColor: e.primary.tooltip,
+      color: t[100]
+    };
+  if (c === "secondary")
+    return {
+      backgroundColor: t[80],
+      color: t.white
+    };
 }}
 
-  ${({ theme: { typography: t } }) => ({
-  fontSize: t.b4R.size,
-  fontWeight: t.b4R.weight,
-  lineHeight: t.b4R.lineHeight,
-  letterSpacing: t.b4R.letterSpacing,
-  "& svg:not(.tooltip-closer)": {
-    width: 24,
-    height: 24
-  }
-})};
+  ${({ size: e, theme: { typography: t, spacing: c } }) => {
+  if (e === "small")
+    return {
+      fontSize: t.c3R.size,
+      fontWeight: t.c3R.weight,
+      lineHeight: t.c3R.lineHeight,
+      letterSpacing: t.c3R.letterSpacing,
+      padding: c.content(2)
+    };
+  if (e === "medium")
+    return {
+      fontSize: t.b4R.size,
+      fontWeight: t.b4R.weight,
+      lineHeight: t.b4R.lineHeight,
+      letterSpacing: t.b4R.letterSpacing,
+      padding: c.content(3)
+    };
+}};
 
   ${({
   theme: {
-    palette: { brand: t, grey: r }
+    palette: { brand: e, grey: t }
   },
-  placement: m,
-  color: e,
-  offset: s,
-  arrowOffset: c
+  placement: c,
+  color: r,
+  offset: d,
+  arrowOffset: p
 }) => {
   let o = {};
-  const n = (s == null ? void 0 : s.x) || 0, p = (s == null ? void 0 : s.y) || 0, l = (c == null ? void 0 : c.x) || 0, a = (c == null ? void 0 : c.y) || 0;
-  switch (m) {
+  const a = (d == null ? void 0 : d.x) || 0, n = (d == null ? void 0 : d.y) || 0, m = (p == null ? void 0 : p.x) || 0, l = (p == null ? void 0 : p.y) || 0;
+  switch (c) {
     case "bottom-left":
       o = {
-        top: `calc(-12px + ${p}px)`,
-        left: `calc(-6px + ${n}px)`,
+        top: `calc(-12px + ${n}px)`,
+        left: `calc(-6px + ${a}px)`,
         transform: "translateY(-100%)",
         "&:after": {
           content: '""',
           position: "absolute",
           top: "100%",
-          left: `calc(12px + ${l}px)`,
-          borderTop: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`,
+          left: `calc(12px + ${m}px)`,
+          borderTop: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
           borderRight: "6px solid transparent",
           borderBottom: "8px solid transparent",
           borderLeft: "6px solid transparent"
@@ -84,16 +99,16 @@ const _ = z.div`
       break;
     case "bottom-center":
       o = {
-        top: `calc(-12px + ${p}px)`,
+        top: `calc(-12px + ${n}px)`,
         left: "50%",
-        transform: `translate(calc(-50% + ${n}px), -100%)`,
+        transform: `translate(calc(-50% + ${a}px), -100%)`,
         "&:after": {
           content: '""',
           position: "absolute",
           top: "100%",
-          left: `calc(50% + ${l}px)`,
+          left: `calc(50% + ${m}px)`,
           transform: "translateX(-50%)",
-          borderTop: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`,
+          borderTop: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
           borderRight: "6px solid transparent",
           borderBottom: "8px solid transparent",
           borderLeft: "6px solid transparent"
@@ -102,15 +117,15 @@ const _ = z.div`
       break;
     case "bottom-right":
       o = {
-        top: `calc(-12px + ${p}px)`,
-        right: `calc(-6px - ${n}px)`,
+        top: `calc(-12px + ${n}px)`,
+        right: `calc(-6px - ${a}px)`,
         transform: "translateY(-100%)",
         "&:after": {
           content: '""',
           position: "absolute",
           top: "100%",
-          right: `calc(12px - ${l}px)`,
-          borderTop: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`,
+          right: `calc(12px - ${m}px)`,
+          borderTop: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
           borderRight: "6px solid transparent",
           borderBottom: "8px solid transparent",
           borderLeft: "6px solid transparent"
@@ -119,15 +134,15 @@ const _ = z.div`
       break;
     case "left-top":
       o = {
-        top: `calc(-6px + ${p}px)`,
-        left: `calc(100% + 12px + ${n}px)`,
+        top: `calc(-6px + ${n}px)`,
+        left: `calc(100% + 12px + ${a}px)`,
         "&:after": {
           content: '""',
           position: "absolute",
-          top: `calc(12px + ${a}px)`,
+          top: `calc(12px + ${l}px)`,
           right: "100%",
           borderTop: "6px solid transparent",
-          borderRight: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`,
+          borderRight: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
           borderBottom: "6px solid transparent",
           borderLeft: "8px solid transparent"
         }
@@ -136,16 +151,16 @@ const _ = z.div`
     case "left-middle":
       o = {
         top: "50%",
-        left: `calc(100% + 12px + ${n}px)`,
-        transform: `translateY(calc(-50% + ${p}px))`,
+        left: `calc(100% + 12px + ${a}px)`,
+        transform: `translateY(calc(-50% + ${n}px))`,
         "&:after": {
           content: '""',
           position: "absolute",
-          top: `calc(50% + ${a}px)`,
+          top: `calc(50% + ${l}px)`,
           right: "100%",
           transform: "translateY(-50%)",
           borderTop: "6px solid transparent",
-          borderRight: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`,
+          borderRight: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
           borderBottom: "6px solid transparent",
           borderLeft: "8px solid transparent"
         }
@@ -153,15 +168,15 @@ const _ = z.div`
       break;
     case "left-bottom":
       o = {
-        bottom: `calc(-6px - ${p}px)`,
-        left: `calc(100% + 12px + ${n}px)`,
+        bottom: `calc(-6px - ${n}px)`,
+        left: `calc(100% + 12px + ${a}px)`,
         "&:after": {
           content: '""',
           position: "absolute",
-          bottom: `calc(12px - ${a}px)`,
+          bottom: `calc(12px - ${l}px)`,
           right: "100%",
           borderTop: "6px solid transparent",
-          borderRight: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`,
+          borderRight: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
           borderBottom: "6px solid transparent",
           borderLeft: "8px solid transparent"
         }
@@ -169,16 +184,16 @@ const _ = z.div`
       break;
     case "top-left":
       o = {
-        left: `calc(-6px + ${n}px)`,
-        transform: `translate(0, calc(12px + ${p}px))`,
+        left: `calc(-6px + ${a}px)`,
+        transform: `translate(0, calc(12px + ${n}px))`,
         "&:after": {
           content: '""',
           position: "absolute",
           bottom: "100%",
-          left: `calc(12px + ${l}px)`,
+          left: `calc(12px + ${m}px)`,
           borderTop: "8px solid transparent",
           borderRight: "6px solid transparent",
-          borderBottom: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`,
+          borderBottom: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
           borderLeft: "6px solid transparent"
         }
       };
@@ -186,149 +201,150 @@ const _ = z.div`
     case "top-center":
       o = {
         right: "50%",
-        transform: `translate(calc(50% + ${n}px), calc(12px + ${p}px))`,
+        transform: `translate(calc(50% + ${a}px), calc(12px + ${n}px))`,
         "&:after": {
           content: '""',
           position: "absolute",
           bottom: "100%",
-          left: `calc(50% + ${l}px)`,
+          left: `calc(50% + ${m}px)`,
           transform: "translateX(-50%)",
           borderTop: "8px solid transparent",
           borderRight: "6px solid transparent",
-          borderBottom: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`,
+          borderBottom: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
           borderLeft: "6px solid transparent"
         }
       };
       break;
     case "top-right":
       o = {
-        right: `calc(-6px - ${n}px)`,
-        transform: `translate(0, calc(12px + ${p}px))`,
+        right: `calc(-6px - ${a}px)`,
+        transform: `translate(0, calc(12px + ${n}px))`,
         "&:after": {
           content: '""',
           position: "absolute",
           bottom: "100%",
-          right: `calc(12px - ${l}px)`,
+          right: `calc(12px - ${m}px)`,
           borderTop: "8px solid transparent",
           borderRight: "6px solid transparent",
-          borderBottom: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`,
+          borderBottom: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`,
           borderLeft: "6px solid transparent"
         }
       };
       break;
     case "right-top":
       o = {
-        top: `calc(-6px + ${p}px)`,
-        right: `calc(100% + 12px + ${n}px)`,
+        top: `calc(-6px + ${n}px)`,
+        right: `calc(100% + 12px + ${a}px)`,
         "&:after": {
           content: '""',
           position: "absolute",
-          top: `calc(12px + ${a}px)`,
+          top: `calc(12px + ${l}px)`,
           left: "100%",
           borderTop: "6px solid transparent",
           borderRight: "8px solid transparent",
           borderBottom: "6px solid transparent",
-          borderLeft: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`
+          borderLeft: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`
         }
       };
       break;
     case "right-middle":
       o = {
         top: "50%",
-        right: `calc(100% + 12px + ${n}px)`,
-        transform: `translateY(calc(-50% + ${p}px))`,
+        right: `calc(100% + 12px + ${a}px)`,
+        transform: `translateY(calc(-50% + ${n}px))`,
         "&:after": {
           content: '""',
           position: "absolute",
-          top: `calc(50% + ${a}px)`,
+          top: `calc(50% + ${l}px)`,
           left: "100%",
           transform: "translateY(-50%)",
           borderTop: "6px solid transparent",
           borderRight: "8px solid transparent",
           borderBottom: "6px solid transparent",
-          borderLeft: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`
+          borderLeft: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`
         }
       };
       break;
     case "right-bottom":
       o = {
-        bottom: `calc(-6px - ${p}px)`,
-        right: `calc(100% + 12px + ${n}px)`,
+        bottom: `calc(-6px - ${n}px)`,
+        right: `calc(100% + 12px + ${a}px)`,
         "&:after": {
           content: '""',
           position: "absolute",
-          bottom: `calc(12px - ${a}px)`,
+          bottom: `calc(12px - ${l}px)`,
           left: "100%",
           borderTop: "6px solid transparent",
           borderRight: "8px solid transparent",
           borderBottom: "6px solid transparent",
-          borderLeft: `8px solid ${e === "primary" ? t.primary.tooltip : r[80]}`
+          borderLeft: `8px solid ${r === "primary" ? e.primary.tooltip : t[80]}`
         }
       };
       break;
   }
   return o;
 }};
-`, it = V(function({
-  children: r,
-  placement: m = "bottom-center",
-  color: e = "primary",
-  title: s,
-  body: c,
-  closer: o,
+`, nt = V(function({
+  children: t,
+  placement: c = "bottom-center",
+  color: r = "primary",
+  size: d = "medium",
+  title: p,
+  body: o,
+  closer: a,
   endAdornment: n,
-  inlineCSS: p,
+  inlineCSS: m,
   open: l = !1,
-  onClose: a,
+  onClose: x,
   wrapperProps: y,
-  offset: D,
-  arrowOffset: j,
-  ...d
+  offset: j,
+  arrowOffset: H,
+  ...s
 }, X) {
-  const q = B(), N = B(), F = B(), { isKeyboardMode: g } = Z(), k = L(null), R = L(null), I = L(!0), [H, M] = W(!1), v = (d == null ? void 0 : d.id) || q, E = (d == null ? void 0 : d.titleId) || N, T = (d == null ? void 0 : d.bodyId) || F, K = (i) => {
-    (i.key === "Enter" || i.key === " ") && (a == null || a(i));
+  const q = w(), N = w(), F = w(), { isKeyboardMode: k } = _(), S = L(null), B = L(null), v = L(!0), [M, W] = G(!1), E = (s == null ? void 0 : s.id) || q, K = (s == null ? void 0 : s.titleId) || N, T = (s == null ? void 0 : s.bodyId) || F, Y = (i) => {
+    (i.key === "Enter" || i.key === " ") && (x == null || x(i));
   };
-  return w(() => {
-    R.current && R.current.getBoundingClientRect().width >= 276 && M(!0);
-  }, [l]), w(() => {
-    const i = (x) => {
-      x.key === "Escape" && l && (x.stopPropagation(), a == null || a(x));
+  return I(() => {
+    B.current && B.current.getBoundingClientRect().width >= 276 && W(!0);
+  }, [l]), I(() => {
+    const i = (b) => {
+      b.key === "Escape" && l && (b.stopPropagation(), x == null || x(b));
     };
     return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-  }, [l, a]), w(() => {
-    var x, f, b;
-    if (I.current) {
-      I.current = !1;
+  }, [l, x]), I(() => {
+    var b, u, f;
+    if (v.current) {
+      v.current = !1;
       return;
     }
     if (l) {
-      const u = (x = k.current) == null ? void 0 : x.querySelector(
+      const h = (b = S.current) == null ? void 0 : b.querySelector(
         '.tooltip-closer[role="button"]'
       );
-      if (u && g && u.focus(), !u) {
-        const Y = (f = k.current) == null ? void 0 : f.querySelector('[role="button"]');
-        Y && g && Y.focus();
+      if (h && k && h.focus(), !h) {
+        const C = (u = S.current) == null ? void 0 : u.querySelector('[role="button"]');
+        C && k && C.focus();
       }
       return;
     }
-    const i = (b = k.current) == null ? void 0 : b.querySelector('[role="button"]');
-    i && g && i.focus();
-  }, [l, g]), /* @__PURE__ */ S(
-    _,
+    const i = (f = S.current) == null ? void 0 : f.querySelector('[role="button"]');
+    i && k && i.focus();
+  }, [l, k]), /* @__PURE__ */ R(
+    A,
     {
-      ref: k,
+      ref: S,
       open: l,
       ...y,
       css: y == null ? void 0 : y.inlineCSS,
       children: [
-        G.map(r, (i) => {
-          if (!J(i))
+        J.map(t, (i) => {
+          if (!Q(i))
             return i;
-          const x = (f) => {
-            var b, u;
-            (f.key === "Enter" || f.key === " ") && ((u = (b = i.props) == null ? void 0 : b.onClick) == null || u.call(b, f));
+          const b = (u) => {
+            var f, h;
+            (u.key === "Enter" || u.key === " ") && ((h = (f = i.props) == null ? void 0 : f.onClick) == null || h.call(f, u));
           };
-          return Q(i, {
+          return U(i, {
             inlineCSS: {
               cursor: "pointer",
               "&:active": {
@@ -341,52 +357,53 @@ const _ = z.div`
             "aria-hidden": !1,
             "aria-expanded": l,
             "aria-haspopup": "dialog",
-            "aria-controls": v,
+            "aria-controls": E,
             focusable: !0,
-            onKeyDown: x,
+            onKeyDown: b,
             ...i.props
           });
         }),
-        /* @__PURE__ */ S(
-          A,
+        /* @__PURE__ */ R(
+          O,
           {
-            id: v,
+            id: E,
             className: "tooltip",
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": s ? E : T,
-            "aria-describedby": c ? T : void 0,
+            "aria-labelledby": p ? K : T,
+            "aria-describedby": o ? T : void 0,
+            size: d,
             ref: X,
-            placement: m,
-            color: e,
-            offset: D,
-            arrowOffset: j,
-            ...d,
-            css: p,
+            placement: c,
+            color: r,
+            offset: j,
+            arrowOffset: H,
+            ...s,
+            css: m,
             children: [
-              s && /* @__PURE__ */ S($, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
-                /* @__PURE__ */ h(
-                  U,
+              p && /* @__PURE__ */ R(g, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
+                /* @__PURE__ */ $(
+                  Z,
                   {
-                    id: E,
-                    variant: "h5B",
-                    color: e === "primary" ? "grey.100" : "grey.white",
-                    children: s
+                    id: K,
+                    variant: d === "medium" ? "h5B" : "c3B",
+                    color: r === "primary" ? "grey.100" : "grey.white",
+                    children: p
                   }
                 ),
-                o && /* @__PURE__ */ h($, { flexShrink: 0, children: /* @__PURE__ */ h(
-                  C,
+                a && /* @__PURE__ */ $(g, { flexShrink: 0, children: /* @__PURE__ */ $(
+                  z,
                   {
                     className: "tooltip-closer",
                     name: "CloseLine",
                     size: "xSmall",
-                    color: e === "primary" ? "grey.100" : "grey.white",
+                    color: r === "primary" ? "grey.100" : "grey.white",
                     role: "button",
                     "aria-hidden": "false",
                     focusable: "true",
                     tabIndex: 0,
-                    onClick: a,
-                    onKeyDown: K,
+                    onClick: x,
+                    onKeyDown: Y,
                     "aria-label": "닫기",
                     inlineCSS: {
                       marginLeft: "2px",
@@ -396,30 +413,30 @@ const _ = z.div`
                   }
                 ) })
               ] }),
-              c && /* @__PURE__ */ S(
-                $,
+              o && /* @__PURE__ */ R(
+                g,
                 {
                   id: T,
                   alignItems: "center",
                   gap: 2,
-                  ref: R,
-                  style: H ? { width: "276px", whiteSpace: "wrap" } : {},
+                  ref: B,
+                  style: M ? { width: "276px", whiteSpace: "wrap" } : {},
                   children: [
-                    c,
-                    n && /* @__PURE__ */ h($, { flexShrink: 0, inlineCSS: { fontSize: "24px" }, children: n }),
-                    !s && o && /* @__PURE__ */ h($, { flexShrink: 0, children: /* @__PURE__ */ h(
-                      C,
+                    o,
+                    n && /* @__PURE__ */ $(g, { flexShrink: 0, inlineCSS: { fontSize: "24px" }, children: n }),
+                    !p && a && /* @__PURE__ */ $(g, { flexShrink: 0, children: /* @__PURE__ */ $(
+                      z,
                       {
                         className: "tooltip-closer",
                         name: "CloseLine",
                         size: "xSmall",
-                        color: e === "primary" ? "grey.100" : "grey.white",
+                        color: r === "primary" ? "grey.100" : "grey.white",
                         role: "button",
                         "aria-hidden": "false",
                         focusable: "true",
                         tabIndex: 0,
-                        onClick: a,
-                        onKeyDown: K,
+                        onClick: x,
+                        onKeyDown: Y,
                         "aria-label": "닫기",
                         inlineCSS: {
                           marginLeft: "2px",
@@ -439,5 +456,5 @@ const _ = z.div`
   );
 });
 export {
-  it as default
+  nt as default
 };

package/Tooltip/Tooltip.stories.d.ts

@@ -24,6 +24,12 @@ declare const meta: {
                 type: "radio";
             };
         };
+        size: {
+            options: string[];
+            control: {
+                type: "select";
+            };
+        };
     };
     tags: string[];
 };

package/hooks/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),s=require("./useCheckHasFocus/useCheckHasFocus.cjs"),o=require("./useFocusBoundary/useFocusBoundary.cjs"),r=require("./interactions/useCollapse/useCollapse.cjs"),t=require("./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),c=require("./usePrefersReducedMotion/usePrefersReducedMotion.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=s.default;exports.useFocusBoundary=o.default;exports.useCollapse=r.default;exports.useIsomorphicLayoutEffect=t.default;exports.usePrefersReducedMotion=c.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),s=require("./useCheckHasFocus/useCheckHasFocus.cjs"),o=require("./useFocusBoundary/useFocusBoundary.cjs"),r=require("./interactions/useCollapse/useCollapse.cjs"),t=require("./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),c=require("./usePrefersReducedMotion/usePrefersReducedMotion.cjs"),a=require("./useForm/useForm.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=s.default;exports.useFocusBoundary=o.default;exports.useCollapse=r.default;exports.useIsomorphicLayoutEffect=t.default;exports.usePrefersReducedMotion=c.default;exports.useForm=a.default;

package/hooks/index.d.ts

@@ -5,5 +5,7 @@ export { default as useFocusBoundary } from './useFocusBoundary/useFocusBoundary
 export { default as useCollapse } from './interactions/useCollapse/useCollapse';
 export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 export { default as usePrefersReducedMotion } from './usePrefersReducedMotion/usePrefersReducedMotion';
+export { default as useForm } from './useForm/useForm';
 export type { UseFocusBoundaryProps } from './useFocusBoundary/useFocusBoundary';
 export type { UseCollapseProps } from './interactions/useCollapse/useCollapse';
+export type { FieldErrors, FormContext, FormFieldHelper, OnSubmitFn, SubmitFn, ValidateFn, UseFormProps, UseFormReturn } from './useForm/useForm';

package/hooks/index.es.js

@@ -2,15 +2,17 @@ import { default as s } from "./useCheckHoverPossible/useCheckHoverPossible.es.j
 import { default as a } from "./useCheckKeyboardMode/useCheckKeyboardMode.es.js";
 import { default as f } from "./useCheckHasFocus/useCheckHasFocus.es.js";
 import { default as d } from "./useFocusBoundary/useFocusBoundary.es.js";
-import { default as p } from "./interactions/useCollapse/useCollapse.es.js";
-import { default as m } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
+import { default as m } from "./interactions/useCollapse/useCollapse.es.js";
+import { default as c } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
 import { default as h } from "./usePrefersReducedMotion/usePrefersReducedMotion.es.js";
+import { default as i } from "./useForm/useForm.es.js";
 export {
   f as useCheckHasFocus,
   s as useCheckHoverPossible,
   a as useCheckKeyboardMode,
-  p as useCollapse,
+  m as useCollapse,
   d as useFocusBoundary,
-  m as useIsomorphicLayoutEffect,
+  i as useForm,
+  c as useIsomorphicLayoutEffect,
   h as usePrefersReducedMotion
 };

package/hooks/useForm/useForm.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),y=require("./useForm.utils.cjs");function O({fieldNames:S,values:u,validate:C,meta:n,scrollOptions:k,scrollOnError:d=!0,focusOnError:o=!1}){const a=t.useRef(new Map),E=t.useRef(new Map),[l,b]=t.useState({}),[V,F]=t.useState(!1),R=d||o,_=t.useCallback(e=>{const r=E.current.get(e);if(r)return r;const s=c=>{c?a.current.set(e,c):a.current.delete(e)};return E.current.set(e,s),s},[]),i=t.useCallback(e=>{requestAnimationFrame(()=>{for(const r of S){if(!(e==null?void 0:e[r]))continue;const c=a.current.get(r);if(d&&c&&c.scrollIntoView(k??y.DEFAULT_SCROLL_OPTIONS),o&&c){const g=c.querySelector('input:not([type="hidden"]):not([disabled]), textarea:not([disabled])');g==null||g.focus({preventScroll:!0})}break}})},[S,k,d,o]),w=t.useCallback(()=>{const e={};return C({values:u,meta:n,fieldRefs:a.current,error:e})},[C,u,n]),f=t.useCallback(({callEffectOnError:e=!0}={})=>{const r=w();b(r);const s=y.hasError(r);return s&&e&&R&&i(r),{isValid:!s,errors:r}},[w,R,i]),m=t.useCallback(({callEffectOnError:e=!0}={})=>{f({callEffectOnError:e})},[f]),q=t.useCallback(()=>{b({})},[]),M=t.useCallback((e,r)=>{b(s=>({...s,[e]:r}))},[]),h=t.useCallback(e=>{i(e)},[i]),I=t.useCallback(e=>{const r=l==null?void 0:l[e];if(r)return{severity:"error",message:r}},[l]),L=t.useCallback((e={})=>async()=>{F(!0);const{isValid:r,errors:s}=f({callEffectOnError:!0}),c={values:u,meta:n,fieldRefs:a.current,error:s};r?e!=null&&e.onSuccess&&await e.onSuccess(c):e!=null&&e.onError&&await e.onError(c),e!=null&&e.onSettled&&await e.onSettled(c)},[f,u,n,F]);return{isSubmitted:V,errors:l,registerField:_,clearErrors:q,triggerValidate:m,triggerSetFieldError:M,triggerEffectOnError:h,getFieldHelper:I,submit:L}}exports.default=O;