@forsyteco/product-ui 0.0.11 → 0.0.13

package/dist/useFocusRing-Df1NuOsX.mjs

@@ -0,0 +1,497 @@
+import re, { useRef as M, useCallback as b, useEffect as S, useState as N, useMemo as oe } from "react";
+const ie = typeof document < "u" ? re.useLayoutEffect : () => {
+}, h = (e) => {
+  var n;
+  return (n = e?.ownerDocument) !== null && n !== void 0 ? n : document;
+}, L = (e) => e && "window" in e && e.window === e ? e : h(e).defaultView || window;
+function ae(e) {
+  return e !== null && typeof e == "object" && "nodeType" in e && typeof e.nodeType == "number";
+}
+function se(e) {
+  return ae(e) && e.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in e;
+}
+let ue = !1;
+function j() {
+  return ue;
+}
+function y(e, n) {
+  if (!j()) return n && e ? e.contains(n) : !1;
+  if (!e || !n) return !1;
+  let t = n;
+  for (; t !== null; ) {
+    if (t === e) return !0;
+    t.tagName === "SLOT" && t.assignedSlot ? t = t.assignedSlot.parentNode : se(t) ? t = t.host : t = t.parentNode;
+  }
+  return !1;
+}
+const A = (e = document) => {
+  var n;
+  if (!j()) return e.activeElement;
+  let t = e.activeElement;
+  for (; t && "shadowRoot" in t && (!((n = t.shadowRoot) === null || n === void 0) && n.activeElement); ) t = t.shadowRoot.activeElement;
+  return t;
+};
+function q(e) {
+  return j() && e.target.shadowRoot && e.composedPath ? e.composedPath()[0] : e.target;
+}
+function ce(e) {
+  if (le()) e.focus({
+    preventScroll: !0
+  });
+  else {
+    let n = de(e);
+    e.focus(), fe(n);
+  }
+}
+let D = null;
+function le() {
+  if (D == null) {
+    D = !1;
+    try {
+      document.createElement("div").focus({
+        get preventScroll() {
+          return D = !0, !0;
+        }
+      });
+    } catch {
+    }
+  }
+  return D;
+}
+function de(e) {
+  let n = e.parentNode, t = [], r = document.scrollingElement || document.documentElement;
+  for (; n instanceof HTMLElement && n !== r; )
+    (n.offsetHeight < n.scrollHeight || n.offsetWidth < n.scrollWidth) && t.push({
+      element: n,
+      scrollTop: n.scrollTop,
+      scrollLeft: n.scrollLeft
+    }), n = n.parentNode;
+  return r instanceof HTMLElement && t.push({
+    element: r,
+    scrollTop: r.scrollTop,
+    scrollLeft: r.scrollLeft
+  }), t;
+}
+function fe(e) {
+  for (let { element: n, scrollTop: t, scrollLeft: r } of e)
+    n.scrollTop = t, n.scrollLeft = r;
+}
+function W(e) {
+  var n;
+  if (typeof window > "u" || window.navigator == null) return !1;
+  let t = (n = window.navigator.userAgentData) === null || n === void 0 ? void 0 : n.brands;
+  return Array.isArray(t) && t.some((r) => e.test(r.brand)) || e.test(window.navigator.userAgent);
+}
+function R(e) {
+  var n;
+  return typeof window < "u" && window.navigator != null ? e.test(((n = window.navigator.userAgentData) === null || n === void 0 ? void 0 : n.platform) || window.navigator.platform) : !1;
+}
+function E(e) {
+  if (process.env.NODE_ENV === "test") return e;
+  let n = null;
+  return () => (n == null && (n = e()), n);
+}
+const x = E(function() {
+  return R(/^Mac/i);
+}), ve = E(function() {
+  return R(/^iPhone/i);
+}), z = E(function() {
+  return R(/^iPad/i) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  x() && navigator.maxTouchPoints > 1;
+}), be = E(function() {
+  return ve() || z();
+});
+E(function() {
+  return x() || be();
+});
+const pe = E(function() {
+  return W(/AppleWebKit/i) && !$e();
+}), $e = E(function() {
+  return W(/Chrome/i);
+}), Ee = E(function() {
+  return W(/Android/i);
+}), me = E(function() {
+  return W(/Firefox/i);
+});
+function H(e, n, t = !0) {
+  var r, o;
+  let { metaKey: a, ctrlKey: s, altKey: i, shiftKey: u } = n;
+  me() && (!((o = window.event) === null || o === void 0 || (r = o.type) === null || r === void 0) && r.startsWith("key")) && e.target === "_blank" && (x() ? a = !0 : s = !0);
+  let l = pe() && x() && !z() && process.env.NODE_ENV !== "test" ? new KeyboardEvent("keydown", {
+    keyIdentifier: "Enter",
+    metaKey: a,
+    ctrlKey: s,
+    altKey: i,
+    shiftKey: u
+  }) : new MouseEvent("click", {
+    metaKey: a,
+    ctrlKey: s,
+    altKey: i,
+    shiftKey: u,
+    detail: 1,
+    bubbles: !0,
+    cancelable: !0
+  });
+  H.isOpening = t, ce(e), e.dispatchEvent(l), H.isOpening = !1;
+}
+H.isOpening = !1;
+function J() {
+  let e = M(/* @__PURE__ */ new Map()), n = b((o, a, s, i) => {
+    let u = i?.once ? (...l) => {
+      e.current.delete(s), s(...l);
+    } : s;
+    e.current.set(s, {
+      type: a,
+      eventTarget: o,
+      fn: u,
+      options: i
+    }), o.addEventListener(a, u, i);
+  }, []), t = b((o, a, s, i) => {
+    var u;
+    let l = ((u = e.current.get(s)) === null || u === void 0 ? void 0 : u.fn) || s;
+    o.removeEventListener(a, l, i), e.current.delete(s);
+  }, []), r = b(() => {
+    e.current.forEach((o, a) => {
+      t(o.eventTarget, o.type, a, o.options);
+    });
+  }, [
+    t
+  ]);
+  return S(() => r, [
+    r
+  ]), {
+    addGlobalListener: n,
+    removeGlobalListener: t,
+    removeAllGlobalListeners: r
+  };
+}
+function ge(e) {
+  return e.pointerType === "" && e.isTrusted ? !0 : Ee() && e.pointerType ? e.type === "click" && e.buttons === 1 : e.detail === 0 && !e.pointerType;
+}
+function Q(e) {
+  let n = e;
+  return n.nativeEvent = e, n.isDefaultPrevented = () => n.defaultPrevented, n.isPropagationStopped = () => n.cancelBubble, n.persist = () => {
+  }, n;
+}
+function ye(e, n) {
+  Object.defineProperty(e, "target", {
+    value: n
+  }), Object.defineProperty(e, "currentTarget", {
+    value: n
+  });
+}
+function X(e) {
+  let n = M({
+    isFocused: !1,
+    observer: null
+  });
+  return ie(() => {
+    const t = n.current;
+    return () => {
+      t.observer && (t.observer.disconnect(), t.observer = null);
+    };
+  }, []), b((t) => {
+    if (t.target instanceof HTMLButtonElement || t.target instanceof HTMLInputElement || t.target instanceof HTMLTextAreaElement || t.target instanceof HTMLSelectElement) {
+      n.current.isFocused = !0;
+      let r = t.target, o = (a) => {
+        if (n.current.isFocused = !1, r.disabled) {
+          let s = Q(a);
+          e?.(s);
+        }
+        n.current.observer && (n.current.observer.disconnect(), n.current.observer = null);
+      };
+      r.addEventListener("focusout", o, {
+        once: !0
+      }), n.current.observer = new MutationObserver(() => {
+        if (n.current.isFocused && r.disabled) {
+          var a;
+          (a = n.current.observer) === null || a === void 0 || a.disconnect();
+          let s = r === document.activeElement ? null : document.activeElement;
+          r.dispatchEvent(new FocusEvent("blur", {
+            relatedTarget: s
+          })), r.dispatchEvent(new FocusEvent("focusout", {
+            bubbles: !0,
+            relatedTarget: s
+          }));
+        }
+      }), n.current.observer.observe(r, {
+        attributes: !0,
+        attributeFilter: [
+          "disabled"
+        ]
+      });
+    }
+  }, [
+    e
+  ]);
+}
+let he = !1, P = null;
+const C = /* @__PURE__ */ new Set();
+let F = /* @__PURE__ */ new Map(), T = !1, G = !1;
+const we = {
+  Tab: !0,
+  Escape: !0
+};
+function U(e, n) {
+  for (let t of C) t(e, n);
+}
+function Le(e) {
+  return !(e.metaKey || !x() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+}
+function _(e) {
+  T = !0, !H.isOpening && Le(e) && (P = "keyboard", U("keyboard", e));
+}
+function f(e) {
+  P = "pointer", "pointerType" in e && e.pointerType, (e.type === "mousedown" || e.type === "pointerdown") && (T = !0, U("pointer", e));
+}
+function Z(e) {
+  !H.isOpening && ge(e) && (T = !0, P = "virtual");
+}
+function ee(e) {
+  e.target === window || e.target === document || he || !e.isTrusted || (!T && !G && (P = "virtual", U("virtual", e)), T = !1, G = !1);
+}
+function te() {
+  T = !1, G = !0;
+}
+function V(e) {
+  if (typeof window > "u" || typeof document > "u" || F.get(L(e))) return;
+  const n = L(e), t = h(e);
+  let r = n.HTMLElement.prototype.focus;
+  n.HTMLElement.prototype.focus = function() {
+    T = !0, r.apply(this, arguments);
+  }, t.addEventListener("keydown", _, !0), t.addEventListener("keyup", _, !0), t.addEventListener("click", Z, !0), n.addEventListener("focus", ee, !0), n.addEventListener("blur", te, !1), typeof PointerEvent < "u" ? (t.addEventListener("pointerdown", f, !0), t.addEventListener("pointermove", f, !0), t.addEventListener("pointerup", f, !0)) : process.env.NODE_ENV === "test" && (t.addEventListener("mousedown", f, !0), t.addEventListener("mousemove", f, !0), t.addEventListener("mouseup", f, !0)), n.addEventListener("beforeunload", () => {
+    ne(e);
+  }, {
+    once: !0
+  }), F.set(n, {
+    focus: r
+  });
+}
+const ne = (e, n) => {
+  const t = L(e), r = h(e);
+  n && r.removeEventListener("DOMContentLoaded", n), F.has(t) && (t.HTMLElement.prototype.focus = F.get(t).focus, r.removeEventListener("keydown", _, !0), r.removeEventListener("keyup", _, !0), r.removeEventListener("click", Z, !0), t.removeEventListener("focus", ee, !0), t.removeEventListener("blur", te, !1), typeof PointerEvent < "u" ? (r.removeEventListener("pointerdown", f, !0), r.removeEventListener("pointermove", f, !0), r.removeEventListener("pointerup", f, !0)) : process.env.NODE_ENV === "test" && (r.removeEventListener("mousedown", f, !0), r.removeEventListener("mousemove", f, !0), r.removeEventListener("mouseup", f, !0)), F.delete(t));
+};
+function Te(e) {
+  const n = h(e);
+  let t;
+  return n.readyState !== "loading" ? V(e) : (t = () => {
+    V(e);
+  }, n.addEventListener("DOMContentLoaded", t)), () => ne(e, t);
+}
+typeof document < "u" && Te();
+function I() {
+  return P !== "pointer";
+}
+const Fe = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "color",
+  "file",
+  "image",
+  "button",
+  "submit",
+  "reset"
+]);
+function xe(e, n, t) {
+  let r = h(t?.target);
+  const o = typeof window < "u" ? L(t?.target).HTMLInputElement : HTMLInputElement, a = typeof window < "u" ? L(t?.target).HTMLTextAreaElement : HTMLTextAreaElement, s = typeof window < "u" ? L(t?.target).HTMLElement : HTMLElement, i = typeof window < "u" ? L(t?.target).KeyboardEvent : KeyboardEvent;
+  return e = e || r.activeElement instanceof o && !Fe.has(r.activeElement.type) || r.activeElement instanceof a || r.activeElement instanceof s && r.activeElement.isContentEditable, !(e && n === "keyboard" && t instanceof i && !we[t.key]);
+}
+function He(e, n, t) {
+  V(), S(() => {
+    if (t?.enabled === !1) return;
+    let r = (o, a) => {
+      xe(!!t?.isTextInput, o, a) && e(I());
+    };
+    return C.add(r), () => {
+      C.delete(r);
+    };
+  }, n);
+}
+function Me(e) {
+  let { isDisabled: n, onFocus: t, onBlur: r, onFocusChange: o } = e;
+  const a = b((u) => {
+    if (u.target === u.currentTarget)
+      return r && r(u), o && o(!1), !0;
+  }, [
+    r,
+    o
+  ]), s = X(a), i = b((u) => {
+    const l = h(u.target), m = l ? A(l) : A();
+    u.target === u.currentTarget && m === q(u.nativeEvent) && (t && t(u), o && o(!0), s(u));
+  }, [
+    o,
+    t,
+    s
+  ]);
+  return {
+    focusProps: {
+      onFocus: !n && (t || o || r) ? i : void 0,
+      onBlur: !n && (r || o) ? a : void 0
+    }
+  };
+}
+function Pe(e) {
+  let { isDisabled: n, onBlurWithin: t, onFocusWithin: r, onFocusWithinChange: o } = e, a = M({
+    isFocusWithin: !1
+  }), { addGlobalListener: s, removeAllGlobalListeners: i } = J(), u = b((d) => {
+    y(d.currentTarget, d.target) && a.current.isFocusWithin && !y(d.currentTarget, d.relatedTarget) && (a.current.isFocusWithin = !1, i(), t && t(d), o && o(!1));
+  }, [
+    t,
+    o,
+    a,
+    i
+  ]), l = X(u), m = b((d) => {
+    if (!y(d.currentTarget, d.target)) return;
+    const g = h(d.target), v = A(g);
+    if (!a.current.isFocusWithin && v === q(d.nativeEvent)) {
+      r && r(d), o && o(!0), a.current.isFocusWithin = !0, l(d);
+      let p = d.currentTarget;
+      s(g, "focus", (c) => {
+        if (a.current.isFocusWithin && !y(p, c.target)) {
+          let $ = new g.defaultView.FocusEvent("blur", {
+            relatedTarget: c.target
+          });
+          ye($, p);
+          let w = Q($);
+          u(w);
+        }
+      }, {
+        capture: !0
+      });
+    }
+  }, [
+    r,
+    o,
+    l,
+    s,
+    u
+  ]);
+  return n ? {
+    focusWithinProps: {
+      // These cannot be null, that would conflict in mergeProps
+      onFocus: void 0,
+      onBlur: void 0
+    }
+  } : {
+    focusWithinProps: {
+      onFocus: m,
+      onBlur: u
+    }
+  };
+}
+let O = !1, K = 0;
+function B() {
+  O = !0, setTimeout(() => {
+    O = !1;
+  }, 50);
+}
+function Y(e) {
+  e.pointerType === "touch" && B();
+}
+function De() {
+  if (!(typeof document > "u"))
+    return K === 0 && (typeof PointerEvent < "u" ? document.addEventListener("pointerup", Y) : process.env.NODE_ENV === "test" && document.addEventListener("touchend", B)), K++, () => {
+      K--, !(K > 0) && (typeof PointerEvent < "u" ? document.removeEventListener("pointerup", Y) : process.env.NODE_ENV === "test" && document.removeEventListener("touchend", B));
+    };
+}
+function Se(e) {
+  let { onHoverStart: n, onHoverChange: t, onHoverEnd: r, isDisabled: o } = e, [a, s] = N(!1), i = M({
+    isHovered: !1,
+    ignoreEmulatedMouseEvents: !1,
+    pointerType: "",
+    target: null
+  }).current;
+  S(De, []);
+  let { addGlobalListener: u, removeAllGlobalListeners: l } = J(), { hoverProps: m, triggerHoverEnd: d } = oe(() => {
+    let g = (c, $) => {
+      if (i.pointerType = $, o || $ === "touch" || i.isHovered || !y(c.currentTarget, c.target)) return;
+      i.isHovered = !0;
+      let w = c.currentTarget;
+      i.target = w, u(h(c.target), "pointerover", (k) => {
+        i.isHovered && i.target && !y(i.target, k.target) && v(k, k.pointerType);
+      }, {
+        capture: !0
+      }), n && n({
+        type: "hoverstart",
+        target: w,
+        pointerType: $
+      }), t && t(!0), s(!0);
+    }, v = (c, $) => {
+      let w = i.target;
+      i.pointerType = "", i.target = null, !($ === "touch" || !i.isHovered || !w) && (i.isHovered = !1, l(), r && r({
+        type: "hoverend",
+        target: w,
+        pointerType: $
+      }), t && t(!1), s(!1));
+    }, p = {};
+    return typeof PointerEvent < "u" ? (p.onPointerEnter = (c) => {
+      O && c.pointerType === "mouse" || g(c, c.pointerType);
+    }, p.onPointerLeave = (c) => {
+      !o && y(c.currentTarget, c.target) && v(c, c.pointerType);
+    }) : process.env.NODE_ENV === "test" && (p.onTouchStart = () => {
+      i.ignoreEmulatedMouseEvents = !0;
+    }, p.onMouseEnter = (c) => {
+      !i.ignoreEmulatedMouseEvents && !O && g(c, "mouse"), i.ignoreEmulatedMouseEvents = !1;
+    }, p.onMouseLeave = (c) => {
+      !o && y(c.currentTarget, c.target) && v(c, "mouse");
+    }), {
+      hoverProps: p,
+      triggerHoverEnd: v
+    };
+  }, [
+    n,
+    t,
+    r,
+    o,
+    i,
+    u,
+    l
+  ]);
+  return S(() => {
+    o && d({
+      currentTarget: i.target
+    }, i.pointerType);
+  }, [
+    o
+  ]), {
+    hoverProps: m,
+    isHovered: a
+  };
+}
+function _e(e = {}) {
+  let { autoFocus: n = !1, isTextInput: t, within: r } = e, o = M({
+    isFocused: !1,
+    isFocusVisible: n || I()
+  }), [a, s] = N(!1), [i, u] = N(() => o.current.isFocused && o.current.isFocusVisible), l = b(() => u(o.current.isFocused && o.current.isFocusVisible), []), m = b((v) => {
+    o.current.isFocused = v, o.current.isFocusVisible = I(), s(v), l();
+  }, [
+    l
+  ]);
+  He((v) => {
+    o.current.isFocusVisible = v, l();
+  }, [
+    t,
+    a
+  ], {
+    enabled: a,
+    isTextInput: t
+  });
+  let { focusProps: d } = Me({
+    isDisabled: r,
+    onFocusChange: m
+  }), { focusWithinProps: g } = Pe({
+    isDisabled: !r,
+    onFocusWithinChange: m
+  });
+  return {
+    isFocused: a,
+    isFocusVisible: i,
+    focusProps: r ? g : d
+  };
+}
+export {
+  _e as $,
+  Se as a
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsyteco/product-ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "An implementation of Forsyte's product design system using React 🐝",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -86,6 +86,16 @@
         "default": "./dist/checkbox/index.cjs"
       }
     },
+    "./autocomplete": {
+      "import": {
+        "types": "./dist/autocomplete/index.d.ts",
+        "default": "./dist/autocomplete/index.mjs"
+      },
+      "require": {
+        "types": "./dist/autocomplete/index.d.ts",
+        "default": "./dist/autocomplete/index.cjs"
+      }
+    },
     "./combobox": {
       "import": {
         "types": "./dist/combobox/index.d.ts",
@@ -363,38 +373,38 @@
     "@github/relative-time-element": "^5.0.0",
     "@headlessui/react": "^2.2.9",
     "@lit-labs/react": "^2.1.3",
-    "@tailwindcss/vite": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.18",
     "boring-avatars": "^2.0.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
-    "lucide-react": "^0.556.0",
+    "lucide-react": "^0.563.0",
     "radix-ui": "^1.4.3",
-    "react": "^19.2.1",
-    "react-day-picker": "^9.12.0",
-    "react-dom": "^19.2.1",
+    "react": "^19.2.4",
+    "react-day-picker": "^9.13.1",
+    "react-dom": "^19.2.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@storybook/addon-vitest": "^10.1.9",
-    "@storybook/react-vite": "^10.1.9",
+    "@storybook/addon-vitest": "^10.2.8",
+    "@storybook/react-vite": "^10.2.8",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "19",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser-playwright": "^4.0.15",
-    "@vitest/coverage-v8": "^4.0.15",
-    "@vitest/ui": "^4.0.15",
-    "jsdom": "^27.2.0",
-    "playwright": "^1.57.0",
-    "rollup": "^4.53.5",
-    "storybook": "^10.1.9",
-    "tailwindcss": "^4.1.17",
-    "vite": "^7.2.6",
-    "vite-plugin-dts": "^4.3.0",
-    "vitest": "^4.0.15"
+    "@types/react": "^19.2.13",
+    "@vitejs/plugin-react": "^5.1.3",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
+    "jsdom": "^28.0.0",
+    "playwright": "^1.58.2",
+    "rollup": "^4.57.1",
+    "storybook": "^10.2.8",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "react": ">=19.2.1 <20",