@t-headless-ui/react 1.1.0 → 1.1.2

package/dist/es/anchor/store.mjs

@@ -8,34 +8,37 @@ import { scrollIntoView as L } from "./utils/scrollIntoView.mjs";
 import { trailingThrottle as R } from "../utils/throttle.mjs";
 import { getEleInViewport as M } from "./utils/getEleInViewport.mjs";
 function W({ propScrollContainer: p, onChange: u, offset: d, queryKey: E, isCloseInitAnchor: I }) {
-  const o = l(null), t = l(null), n = l(/* @__PURE__ */ new Map()), i = l(!1), [c, f] = h("");
+  const i = l(null), t = l(null), n = l(/* @__PURE__ */ new Map()), c = l(!1), [s, f] = h("");
   function S(r, e) {
-    r.preventDefault(), a({ targetId: e, linkMap: n, wrapperRef: o, currentId: c, setCurrentId: f, onChange: u }), L({ scrollContainer: t, targetId: e, offset: d, isScrolling: i });
+    r.preventDefault(), a({ targetId: e, linkMap: n, wrapperRef: i, currentId: s, setCurrentId: f, onChange: u }), L({ scrollContainer: t, targetId: e, offset: d, isScrolling: c });
   }
   const g = v(() => {
-    if (i.current) return;
+    if (c.current) return;
     const r = M({ linkMap: n, scrollContainer: t });
-    r != null && r.id && a({ targetId: r.id, linkMap: n, wrapperRef: o, currentId: c, setCurrentId: f, onChange: u });
-  }), s = v(
+    r != null && r.id && a({ targetId: r.id, linkMap: n, wrapperRef: i, currentId: s, setCurrentId: f, onChange: u });
+  }), o = v(
     R(() => {
-      g(), i.current = !1;
+      g(), c.current = !1;
     }, 30)
   );
   return w(() => {
     var r;
-    return t.current = k(p), (r = t.current) == null || r.addEventListener("scroll", s), () => {
+    return t.current = k(p), (r = t.current) == null || r.addEventListener("scroll", o), () => {
       var e;
-      (e = t.current) == null || e.removeEventListener("scroll", s);
+      (e = t.current) == null || e.removeEventListener("scroll", o);
     };
-  }, [s, p]), w(() => {
-    if (I) return;
+  }, [o, p]), w(() => {
+    if (!I) {
+      o();
+      return;
+    }
     const r = new URL(window.location.href), m = new URLSearchParams(r.search).get(E);
-    m && (a({ targetId: m, linkMap: n, wrapperRef: o, currentId: c, setCurrentId: f, onChange: u }), L({ scrollContainer: t, targetId: m, offset: d, isScrolling: i }));
+    m && (a({ targetId: m, linkMap: n, wrapperRef: i, currentId: s, setCurrentId: f, onChange: u }), L({ scrollContainer: t, targetId: m, offset: d, isScrolling: c }));
   }, []), {
-    onScroll: s,
-    currentId: c,
+    onScroll: o,
+    currentId: s,
     onLinkClick: S,
-    wrapperRef: o,
+    wrapperRef: i,
     scrollContainer: t,
     linkMap: n
   };

package/dist/es/anchor/utils/getEleInViewport.mjs

@@ -1,18 +1,16 @@
 import { findNode as l } from "./findNode.mjs";
-import { getContainerElement as m } from "./getContainerElement.mjs";
-import { isWindow as p } from "../../utils/is.mjs";
-function E({ linkMap: i, scrollContainer: r }) {
-  const n = r.current, c = m(n).getBoundingClientRect(), s = i.current.keys();
-  for (const f of s) {
-    const t = l(document, f);
-    let e = !1;
+import { getContainerElement as p } from "./getContainerElement.mjs";
+import { isWindow as u } from "../../utils/is.mjs";
+function E({ linkMap: c, scrollContainer: s }) {
+  const o = s.current, m = p(o).getBoundingClientRect(), f = Array.from(c.current.keys()), n = [];
+  for (const e of f) {
+    const t = l(document, "#" + CSS.escape(e));
     if (t) {
-      const { top: o } = t.getBoundingClientRect();
-      if (p(n) ? e = o >= 0 : e = o - c.top >= 0, e)
-        return t;
+      const { top: r } = t.getBoundingClientRect(), i = u(o) ? r : r - m.top;
+      i >= 0 && n.push({ element: t, top: i });
     }
   }
-  return null;
+  return n.length === 0 ? null : n.reduce((e, t) => e.top <= t.top ? e : t).element;
 }
 export {
   E as getEleInViewport

package/dist/es/button/button.mjs

@@ -1,19 +1,18 @@
 "use client";
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
 function p(l, n) {
-  const { children: u, htmlType: s = "button", disabled: r, loading: a, onClick: t, ...c } = l;
-  return /* @__PURE__ */ d("button", { ...c, ref: n, type: s, disabled: r, onClick: (o) => {
+  const { children: u, htmlType: c = "button", disabled: t, loading: s, onClick: r, ...d } = l;
+  return /* @__PURE__ */ f("button", { ...d, ref: n, type: c, disabled: t, onClick: (o) => {
     var i;
-    if (a || r) {
+    if (s || t) {
       (i = o == null ? void 0 : o.preventDefault) == null || i.call(o);
       return;
     }
-    t == null || t(o);
+    r == null || r(o);
   }, children: u });
 }
-const m = f(p), h = m;
-h.displayName = "TUI.Button";
+const m = a(p), k = m;
 export {
-  h as Button
+  k as Button
 };

package/dist/es/grid/cell.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { useResponsiveState as i } from "./hooks/useResponsiveState.mjs";
+const w = ({
+  className: r,
+  width: s = 1,
+  height: o = 1,
+  defaultWidth: l = 1,
+  defaultHeight: d = 1,
+  top: t,
+  left: n,
+  middle: c,
+  center: p,
+  area: e,
+  children: a
+}) => {
+  const g = i(s, l), m = i(o, d), u = {
+    height: "100%",
+    minWidth: 0,
+    gridColumnEnd: `span ${g}`,
+    gridRowEnd: `span ${m}`,
+    ...n && { gridColumnStart: n },
+    ...t && { gridRowStart: t },
+    ...p && { textAlign: "center" },
+    ...e && { gridArea: e },
+    ...c && {
+      display: "inline-flex",
+      flexFlow: "column wrap",
+      justifyContent: "center",
+      justifySelf: "stretch"
+    }
+  };
+  return /* @__PURE__ */ f("div", { className: r, style: u, children: a });
+};
+export {
+  w as Cell
+};

package/dist/es/grid/grid.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+const A = ({
+  className: o,
+  columns: r = 12,
+  rows: e,
+  gap: a = "12px",
+  columnGap: t,
+  rowGap: i,
+  height: g = "auto",
+  minRowHeight: u = "20px",
+  flow: x = "row",
+  areas: p,
+  justifyContent: d,
+  alignContent: m,
+  children: f
+}) => {
+  const l = {
+    display: "grid",
+    height: g,
+    gridAutoFlow: x,
+    gridAutoRows: `minmax(${u}, auto)`,
+    gridTemplateColumns: typeof r == "number" ? `repeat(${r}, 1fr)` : r,
+    ...e && {
+      gridTemplateRows: typeof e == "number" ? `repeat(${e}, 1fr)` : e
+    },
+    gap: a,
+    ...t && { columnGap: t },
+    ...i && { rowGap: i },
+    ...p && { gridTemplateAreas: p.map(($) => `"${$}"`).join(" ") },
+    ...d && { justifyContent: d },
+    ...m && { alignContent: m }
+  };
+  return /* @__PURE__ */ s("div", { className: o, style: l, children: f });
+};
+export {
+  A as Grid
+};

package/dist/es/grid/hooks/useResponsiveState.mjs

@@ -0,0 +1,38 @@
+import { useRef as p, useState as b, useEffect as x, useMemo as l } from "react";
+import i, { responsiveArray as c } from "../utils/responsive-observe.mjs";
+import { isObject as k } from "../../utils/is.mjs";
+function f(e) {
+  return k(e);
+}
+const h = (e, s) => {
+  const n = p(null), [u, m] = b({
+    xs: !0,
+    sm: !0,
+    md: !0,
+    lg: !0,
+    xl: !0,
+    xxl: !0,
+    xxxl: !0
+  });
+  return x(() => (n.current = i.subscribe((r) => {
+    f(e) && m(r);
+  }), () => {
+    i.unsubscribe(n.current);
+  }), []), l(() => {
+    let r = s;
+    if (f(e))
+      for (let t = 0; t < c.length; t++) {
+        const o = c[t];
+        if (u[o]) {
+          r = e[o] || s;
+          break;
+        }
+      }
+    else
+      r = e;
+    return r;
+  }, [u, e, s]);
+};
+export {
+  h as useResponsiveState
+};

package/dist/es/grid/utils/responsive-observe.mjs

@@ -0,0 +1,57 @@
+const c = ["xxxl", "xxl", "xl", "lg", "md", "sm", "xs"], r = {
+  xs: "(max-width: 575px)",
+  sm: "(min-width: 576px)",
+  md: "(min-width: 768px)",
+  lg: "(min-width: 992px)",
+  xl: "(min-width: 1200px)",
+  xxl: "(min-width: 1600px)",
+  xxxl: "(min-width: 2000px)"
+};
+let i = [], a = -1, n = {};
+const d = {
+  matchHandlers: {},
+  dispatch(e, t) {
+    return n = e, i.length < 1 ? !1 : (i.forEach((s) => {
+      s.func(n, t);
+    }), !0);
+  },
+  subscribe(e) {
+    i.length === 0 && this.register();
+    const t = (++a).toString();
+    return i.push({
+      token: t,
+      func: e
+    }), e(n, null), t;
+  },
+  unsubscribe(e) {
+    i = i.filter((t) => t.token !== e), i.length === 0 && this.unregister();
+  },
+  unregister() {
+    Object.keys(r).forEach((e) => {
+      const t = r[e], s = this.matchHandlers[t];
+      s && s.mql && s.listener && s.mql.removeListener(s.listener);
+    });
+  },
+  register() {
+    Object.keys(r).forEach((e) => {
+      const t = r[e], s = ({ matches: h }) => {
+        this.dispatch(
+          {
+            ...n,
+            [e]: h
+          },
+          e
+        );
+      }, l = window.matchMedia(t);
+      l.addListener(s), this.matchHandlers[t] = {
+        mql: l,
+        listener: s
+      }, s(l);
+    });
+  }
+};
+export {
+  d as default,
+  c as responsiveArray,
+  r as responsiveMap
+};

package/dist/es/hooks/use-composition.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { useRef as p, useState as g } from "react";
+function v({ value: n, maxLength: l, onChange: s, onKeyDown: a, onPressEnter: u, normalizeHandler: c }) {
+  const e = p(!1), [f, r] = g(""), o = (t, i) => {
+    s && // Prevents onchange from being triggered twice
+    t !== n && (l === void 0 || t.length <= l) && s(t, i);
+  };
+  return {
+    compositionValue: f,
+    triggerValueChange: o,
+    handleCompositionStart: () => {
+      e.current = !0;
+    },
+    handleCompositionEnd: (t) => {
+      e.current = !1, r(void 0), o(t.target.value, t);
+    },
+    handleValueChange: (t) => {
+      const i = t.target.value;
+      e.current ? r(i) : (f && r(void 0), o(i, t));
+    },
+    // intercept handleKeyDown without affecting the default behavior during input chinese
+    handleKeyDown: (t) => {
+      const i = t.key;
+      if (!e.current && (a == null || a(t), i === "Enter" && (u == null || u(t.target.value, t), c))) {
+        const d = c("onPressEnter")(t.target.value);
+        o(d, t);
+      }
+    }
+  };
+}
+export {
+  v as useComposition
+};

package/dist/es/hooks/use-event.mjs

@@ -1,11 +1,12 @@
-import { useRef as o, useCallback as u } from "react";
-function s(r) {
-  const e = o(null);
-  return e.current = r, u(
+"use client";
+import { useRef as u, useCallback as o } from "react";
+function s(t) {
+  const e = u(null);
+  return e.current = t, o(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (...t) => {
+    (...r) => {
       var n;
-      return (n = e.current) == null ? void 0 : n.call(e, ...t);
+      return (n = e.current) == null ? void 0 : n.call(e, ...r);
     },
     []
   );

package/dist/es/hooks/use-focus-tarp.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { useRef as y, useEffect as F } from "react";
+const p = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), area[href], form, audio[controls], video[controls], [tabindex="0"]', v = "fist", T = "none", L = (o, u, b = {}) => {
+  const { initialFocus: e = T, tabbableElements: E = "" } = b, s = y(null);
+  F(() => {
+    var i;
+    if (u && o.current) {
+      const r = o.current;
+      s.current = document.activeElement, (i = s.current) == null || i.blur();
+      const n = r.querySelectorAll(p + E), c = n.length;
+      if (c === 0) return;
+      const l = n[0], a = n[c - 1];
+      e === v ? l.focus() : typeof e == "number" ? (e < 0 && console.error(`initialFocus cannot be a negative number: you entered ${e}`), e >= c && console.error(
+        `initialFocus cannot be greater than or equal to the total number of focusable elements within the target: you entered ${e}`
+      ), n[e].focus()) : e === "none" || console.error(
+        `initialFocus must be either the values 'first', 'none', or a number. You specified initialFocus as ${typeof e}`
+      );
+      const f = (t) => {
+        if (t.key === "Tab") {
+          const m = document.activeElement, d = (h) => (h.focus(), t.preventDefault());
+          !t.shiftKey && m === a && d(l), t.shiftKey && m === l && d(a);
+        }
+      };
+      return r.addEventListener("keydown", f), () => {
+        s.current.focus(), r.removeEventListener("keydown", f);
+      };
+    }
+  }, [o.current, u]);
+};
+export {
+  L as useFocusTrap
+};

package/dist/es/hooks/use-merge-refs.mjs

@@ -0,0 +1,26 @@
+"use client";
+import "react";
+function o(n, r) {
+  if (n != null) {
+    if (typeof n == "function") {
+      n(r);
+      return;
+    }
+    try {
+      n.current = r;
+    } catch {
+      throw new Error(`Cannot assign value '${r}' to ref '${n}'`);
+    }
+  }
+}
+function i(...n) {
+  return (r) => {
+    n.forEach((t) => {
+      o(t, r);
+    });
+  };
+}
+export {
+  o as assignRef,
+  i as mergeRefs
+};

package/dist/es/hooks/use-merge-value.mjs

@@ -1,17 +1,18 @@
+"use client";
 import { useRef as l, useState as o, useEffect as c } from "react";
 import { usePrevious as m } from "./use-previous.mjs";
 import { isUndefined as u } from "../utils/is.mjs";
 function R(s, t) {
-  const { defaultValue: r, value: e } = t || {}, a = l(!0), i = m(t == null ? void 0 : t.value), [f, n] = o(
+  const { defaultValue: r, value: e } = t || {}, n = l(!0), i = m(t == null ? void 0 : t.value), [a, f] = o(
     u(e) ? u(r) ? s : r : e
   );
   return c(() => {
-    if (a.current) {
-      a.current = !1;
+    if (n.current) {
+      n.current = !1;
       return;
     }
-    e === void 0 && i !== e && n(e);
-  }, [e]), [u(e) ? f : e, n, f];
+    e === void 0 && i !== e && f(e);
+  }, [e]), [u(e) ? a : e, f, a];
 }
 export {
   R as useMergeValue

package/dist/es/hooks/use-previous.mjs

@@ -1,10 +1,11 @@
-import { useRef as u, useEffect as t } from "react";
-function f(r) {
-  const e = u(null);
-  return t(() => {
+"use client";
+import { useRef as t, useEffect as u } from "react";
+function o(r) {
+  const e = t(void 0);
+  return u(() => {
     e.current = r;
   }), e.current;
 }
 export {
-  f as usePrevious
+  o as usePrevious
 };

package/dist/es/hooks/use-resize-observer.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect as i } from "react";
+function n(r, s) {
+  i(() => {
+    if (!r)
+      return;
+    const e = new ResizeObserver((o) => {
+      s(r, o[0]);
+    });
+    return e.observe(r), () => {
+      e.disconnect();
+    };
+  }, [r]);
+}
+export {
+  n as useResizeObserver
+};

package/dist/es/hooks/use-state-with-promise.mjs

@@ -1,7 +1,8 @@
-import { useState as n, useEffect as r } from "react";
-function f(u) {
-  const [e, l] = n({
-    value: u,
+"use client";
+import { useState as a, useEffect as r } from "react";
+function v(l) {
+  const [e, o] = a({
+    value: l,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     resolve: (t) => {
     }
@@ -11,10 +12,10 @@ function f(u) {
   }, [e]), [
     e.value,
     (t) => new Promise((s) => {
-      l((a) => {
-        let o = t;
-        return typeof t == "function" && (o = t(a.value)), {
-          value: o,
+      o((n) => {
+        let u = t;
+        return typeof t == "function" && (u = t(n.value)), {
+          value: u,
           resolve: s
         };
       });
@@ -22,5 +23,5 @@ function f(u) {
   ];
 }
 export {
-  f as useStateWithPromise
+  v as useStateWithPromise
 };

package/dist/es/icon/fill/click-fill.mjs

@@ -1,6 +1,6 @@
 import { jsxs as e, Fragment as r, jsx as o } from "react/jsx-runtime";
 import { createIcon as t } from "../createIcon.mjs";
-const n = t({
+const d = t({
   iconProps: { useFillCurrentColor: !0, useStrokeCurrentColor: !0 },
   paths: /* @__PURE__ */ e(r, { children: [
     /* @__PURE__ */ o("path", { d: "M24 4V12", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -21,7 +21,6 @@ const n = t({
     /* @__PURE__ */ o("path", { d: "M9.85795 9.85787L15.5148 15.5147", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" })
   ] })
 });
-n.displayName = "IconClickFill";
 export {
-  n as IconClickFill
+  d as IconClickFill
 };

package/dist/es/icon/fill/github-fill.mjs

@@ -1,6 +1,6 @@
 import { jsxs as e, Fragment as l, jsx as C } from "react/jsx-runtime";
 import { createIcon as o } from "../createIcon.mjs";
-const i = o({
+const d = o({
   iconProps: { useFillCurrentColor: !0 },
   paths: /* @__PURE__ */ e(l, { children: [
     /* @__PURE__ */ C(
@@ -21,7 +21,6 @@ const i = o({
     )
   ] })
 });
-i.displayName = "IconGithubFill";
 export {
-  i as IconGithubFill
+  d as IconGithubFill
 };

package/dist/es/icon/fill/index.mjs

@@ -0,0 +1,16 @@
+import { IconMLogo as l } from "./m-logo.mjs";
+import { IconTLogo as c } from "./t-logo.mjs";
+import { IconGithubFill as n } from "./github-fill.mjs";
+import { IconSunFill as i } from "./sun-fill.mjs";
+import { IconStarFill as p } from "./star-fill.mjs";
+import { IconPlatteFill as I } from "./platte-fill.mjs";
+import { IconClickFill as a } from "./click-fill.mjs";
+export {
+  a as IconClickFill,
+  n as IconGithubFill,
+  l as IconMLogo,
+  I as IconPlatteFill,
+  p as IconStarFill,
+  i as IconSunFill,
+  c as IconTLogo
+};

package/dist/es/icon/fill/m-logo.mjs

@@ -1,11 +1,10 @@
 import { jsx as o } from "react/jsx-runtime";
-import { createIcon as c } from "../createIcon.mjs";
-const r = c({
+import { createIcon as r } from "../createIcon.mjs";
+const h = r({
   iconProps: { useFillCurrentColor: !0 },
   viewBox: "0 0 156 94",
   paths: /* @__PURE__ */ o("path", { d: "M0,31.18h31.18v62.56H0V31.18Zm155.46,5.67v56.89h-31.18V45.36c0-7.83-6.34-14.18-14.17-14.18h-17.01c.29,1.85,.44,3.74,.44,5.67v56.89h-31.18V45.36c0-7.83-6.35-14.18-14.17-14.18H31.18V0h25.51c13.15,0,24.69,6.89,31.21,17.25,2.62,4.15,4.43,8.86,5.2,13.92V0h25.51c20.35,0,36.85,16.5,36.85,36.85Z" })
 });
-r.displayName = "IconMLogo";
 export {
-  r as IconMLogo
+  h as IconMLogo
 };

package/dist/es/icon/fill/platte-fill.mjs

@@ -1,9 +1,9 @@
-import { jsx as e, Fragment as l } from "react/jsx-runtime";
-import { createIcon as o } from "../createIcon.mjs";
-const t = o({
+import { jsx as e, Fragment as o } from "react/jsx-runtime";
+import { createIcon as r } from "../createIcon.mjs";
+const a = r({
   iconProps: { useFillCurrentColor: !0 },
   viewBox: "0 0 24 24",
-  paths: /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
+  paths: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
     "path",
     {
       fillRule: "evenodd",
@@ -12,7 +12,6 @@ const t = o({
     }
   ) })
 });
-t.displayName = "IconPlatteFill";
 export {
-  t as IconPlatteFill
+  a as IconPlatteFill
 };

package/dist/es/icon/fill/star-fill.mjs

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import { createIcon as c } from "../createIcon.mjs";
-const o = c({
+const t = c({
   iconProps: { useFillCurrentColor: !0 },
   paths: /* @__PURE__ */ l(
     "path",
@@ -10,7 +10,6 @@ const o = c({
     }
   )
 });
-o.displayName = "IconStarFill";
 export {
-  o as IconStarFill
+  t as IconStarFill
 };

package/dist/es/icon/fill/sun-fill.mjs

@@ -1,6 +1,6 @@
 import { jsxs as r, Fragment as t, jsx as o } from "react/jsx-runtime";
 import { createIcon as e } from "../createIcon.mjs";
-const n = e({
+const d = e({
   iconProps: { useStrokeCurrentColor: !0 },
   paths: /* @__PURE__ */ r(t, { children: [
     /* @__PURE__ */ o("path", { d: "M9.15039 9.15088L11.3778 11.3783", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -21,7 +21,6 @@ const n = e({
     /* @__PURE__ */ o("path", { d: "M24 45.0001V41.8501", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" })
   ] })
 });
-n.displayName = "IconSunFill";
 export {
-  n as IconSunFill
+  d as IconSunFill
 };