@netlify/spark-ui 0.0.8 → 0.0.11

package/dist/components/preact/SearchModal/components/index.js

@@ -0,0 +1,16 @@
+import { default as a } from "./SearchFooter.js";
+import { default as t } from "./SearchFooterTip.js";
+import { default as d } from "./SearchHeading.js";
+import { default as l } from "./SearchInput.js";
+import { default as c } from "./SearchLink.js";
+import { default as m } from "./SearchToggle/SearchToggle.js";
+import { default as x } from "./SearchWindow.js";
+export {
+  a as SearchFooter,
+  t as SearchFooterTip,
+  d as SearchHeading,
+  l as SearchInput,
+  c as SearchLink,
+  m as SearchToggle,
+  x as SearchWindow
+};

package/dist/components/preact/SearchModal/hooks/useKeyboardNav.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'preact';
+/**
+ * Hook that adds keyboard navigation behavior to a container element.
+ *
+ * - Listens for `Escape`, `ArrowUp`, and `ArrowDown` key events when `isOpen` is true.
+ * - Pressing `Escape` triggers the `onClose` callback.
+ * - Arrow keys allow keyboard users to cycle focus between anchor (`<a>`) elements
+ *   within the referenced container, creating accessible navigation behavior.
+ *
+ * @param containerRef - Ref pointing to the container element containing focusable links
+ * @param isOpen - Boolean indicating whether the navigation context is active
+ * @param onClose - Callback to close the navigation UI when `Escape` is pressed
+ */
+export declare function useKeyboardNav(containerRef: RefObject<HTMLElement>, isOpen: boolean, onClose: () => void): void;

package/dist/components/preact/SearchModal/hooks/useKeyboardNav.js

@@ -0,0 +1,24 @@
+import { y as a } from "../../../../hooks.module-ExpuRnbo.js";
+function l(r, t, o) {
+  a(() => {
+    const c = (e) => {
+      if (t) {
+        if (e.key === "Escape") {
+          o();
+          return;
+        }
+        if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+          e.preventDefault();
+          const d = r.current;
+          if (!d) return;
+          const n = Array.from(d.querySelectorAll("a")), u = n.findIndex((i) => i === document.activeElement), y = e.key === "ArrowDown" ? (u + 1) % n.length : (u - 1 + n.length) % n.length;
+          n[y].focus();
+        }
+      }
+    };
+    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
+  }, [r, t, o]);
+}
+export {
+  l as useKeyboardNav
+};

package/dist/components/preact/SearchModal/hooks/useSearch.d.ts

@@ -0,0 +1,17 @@
+import { SearchState } from '../types/search.types';
+/**
+ * Hook that encapsulates client-side search logic:
+ *
+ * - Initializes and manages search state (`searchTerm`, `results`, `isLoading`)
+ * - Uses a debounced `useTimeout` to delay firing search requests until user input stabilizes
+ * - Triggers `submitSearch` when input is empty or 3+ characters, querying `window.pagefind`
+ * - Maps and formats raw search results into a consistent shape with title, excerpt, url, and icon
+ * - Exposes `setSearchTerm` for live input handling and `submitSearch` for manual triggering
+ */
+export declare function useSearch(): {
+    state: SearchState;
+    actions: {
+        setSearchTerm: (query: string) => void;
+        submitSearch: (query: string) => Promise<void>;
+    };
+};

package/dist/components/preact/SearchModal/hooks/useSearch.js

@@ -0,0 +1,57 @@
+import { A as h, y as p, d as g } from "../../../../hooks.module-ExpuRnbo.js";
+import { getSiteIcon as S } from "../utils/index.js";
+function w(s, r) {
+  const t = h(null), c = h("");
+  return p(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), { reset: () => {
+    t.current && clearTimeout(t.current);
+  }, run: (e) => {
+    c.current = e, t.current = setTimeout(
+      () => s(c.current),
+      r
+    );
+  } };
+}
+function y() {
+  const [s, r] = g({
+    searchTerm: "",
+    results: [],
+    isLoading: !1
+  }), { reset: t, run: c } = w((e) => {
+    (e.length > 2 || e.length === 0) && o(e);
+  }, 300), o = async (e) => {
+    if (!(window != null && window.pagefind)) return;
+    r((n) => ({ ...n, isLoading: !0 }));
+    const i = await window.pagefind.search(e), d = await Promise.all(
+      i.results.map(async (n) => {
+        var u, l, m;
+        const a = await n.data();
+        return {
+          icon: S((u = a.meta) == null ? void 0 : u.content_type),
+          content_type: (l = a.meta) == null ? void 0 : l.content_type,
+          title: (m = a.meta) == null ? void 0 : m.title,
+          url: a.url,
+          excerpt: a.excerpt
+        };
+      })
+    );
+    r((n) => ({
+      ...n,
+      results: d,
+      isLoading: !1
+    }));
+  };
+  return {
+    state: s,
+    actions: {
+      setSearchTerm: (e) => {
+        r((i) => ({ ...i, searchTerm: e })), t(), c(e);
+      },
+      submitSearch: o
+    }
+  };
+}
+export {
+  y as useSearch
+};

package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Custom hook that enables a keyboard shortcut (`⌘ + K` or `Ctrl + K`)
+ * to toggle a search UI open or closed.
+ *
+ * - When the user presses `Meta/Ctrl + K`, it prevents the default browser behavior,
+ *   stops the event from bubbling up, and either opens or closes the search UI
+ *   depending on the current `isOpen` state.
+ *
+ * @param isOpen - Whether the search interface is currently open.
+ * @param onOpen - Callback to open the search interface.
+ * @param onClose - Callback to close the search interface.
+ */
+export declare function useSearchHotkeys(isOpen: boolean, onOpen: () => void, onClose: () => void): void;

package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.js

@@ -0,0 +1,12 @@
+import { y as d } from "../../../../hooks.module-ExpuRnbo.js";
+function m(t, n, o) {
+  d(() => {
+    const r = (e) => {
+      e.metaKey && e.key === "k" && (e.preventDefault(), e.stopImmediatePropagation(), t ? o() : n());
+    };
+    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+  }, [t, n, o]);
+}
+export {
+  m as useSearchHotkeys
+};

package/dist/components/preact/SearchModal/hooks/useSearchParams.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Custom hook that checks the current URL for a `search` query parameter
+ * and, if found, updates the search term and opens the search interface.
+ *
+ * Useful for enabling deep linking to a search view with a pre-filled term,
+ * such as when sharing URLs like `?search=netlify`.
+ *
+ * @param setSearchTerm - Function to update the search input state.
+ * @param onOpen - Function to trigger opening of the search interface (e.g., modal or drawer).
+ */
+export declare function useSearchParams(setSearchTerm: (term: string) => void, onOpen: () => void): void;

package/dist/components/preact/SearchModal/hooks/useSearchParams.js

@@ -0,0 +1,11 @@
+import { y as e } from "../../../../hooks.module-ExpuRnbo.js";
+function t(a, o) {
+  e(() => {
+    if (typeof location > "u") return;
+    const r = (location == null ? void 0 : location.search) && new URLSearchParams(location.search).get("search");
+    r && (a(r), o());
+  }, [a, o]);
+}
+export {
+  t as useSearchParams
+};

package/dist/components/preact/SearchModal/hooks/useSearchToggles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Custom hook that attaches click event listeners to all DOM elements
+ * with the `[data-ntl-search-toggle]` attribute. When clicked, these elements
+ * will trigger the provided `onOpen` callback.
+ *
+ * This is useful for enabling search toggles via declarative HTML attributes
+ * in situations where the search modal or drawer needs to be controlled from
+ * multiple points in the DOM.
+ *
+ * @param onOpen - A function to be called when a toggle element is clicked.
+ */
+export declare function useSearchToggles(onOpen: () => void): void;

package/dist/components/preact/SearchModal/hooks/useSearchToggles.js

@@ -0,0 +1,15 @@
+import { y as c } from "../../../../hooks.module-ExpuRnbo.js";
+function l(t) {
+  c(() => {
+    const r = document.querySelectorAll("[data-ntl-search-toggle]");
+    if (r.length)
+      return r.forEach((e) => {
+        e.removeAttribute("disabled"), e.addEventListener("click", t);
+      }), () => {
+        r.forEach((e) => e.removeEventListener("click", t));
+      };
+  }, [t]);
+}
+export {
+  l as useSearchToggles
+};

package/dist/components/preact/SearchModal/index.d.ts

@@ -0,0 +1,6 @@
+import { ComponentChildren } from 'preact';
+interface Props {
+    children: ComponentChildren;
+}
+declare function SearchModal({ children }: Props): import("preact").JSX.Element;
+export default SearchModal;

package/dist/components/preact/SearchModal/index.js

@@ -0,0 +1,57 @@
+import { u as e } from "../../../jsxRuntime.module-Bzuv3cXw.js";
+import { A as h, y as l, d as f } from "../../../hooks.module-ExpuRnbo.js";
+import p from "../Modal/index.js";
+import S from "./components/SearchFooter.js";
+import u from "./components/SearchFooterTip.js";
+import T from "./components/SearchInput.js";
+import "./components/SearchToggle/SearchToggle.js";
+import y from "./components/SearchWindow.js";
+import i from "../KeyboardKey/index.js";
+import { useSearch as g } from "./hooks/useSearch.js";
+import { useKeyboardNav as v } from "./hooks/useKeyboardNav.js";
+import { useSearchHotkeys as k } from "./hooks/useSearchHotkeys.js";
+import { useSearchParams as N } from "./hooks/useSearchParams.js";
+import { useSearchToggles as w } from "./hooks/useSearchToggles.js";
+import '../../../assets/index2.css';function L(a) {
+  const r = h(null);
+  return l(() => {
+    function t(o) {
+      r.current && !r.current.contains(o.target) && a();
+    }
+    return document.addEventListener("mousedown", t), () => {
+      document.removeEventListener("mousedown", t);
+    };
+  }, [a]), r;
+}
+function W({ children: a }) {
+  const { state: r, actions: t } = g(), [o, m] = f(!1), c = () => m(!0), n = () => m(!1), s = h(null), d = L(n);
+  return w(c), N(t.setSearchTerm, c), k(o, c, n), v(s, o, n), l(() => {
+    s.current && (o ? s.current.showModal() : s.current.close());
+  }, [o]), /* @__PURE__ */ e(p, { ref: s, className: "search-modal", children: /* @__PURE__ */ e("div", { ref: d, class: "search-container", children: [
+    /* @__PURE__ */ e("form", { class: "search", children: /* @__PURE__ */ e(T, { setSearchTerm: t.setSearchTerm, initialValue: r.searchTerm }) }),
+    /* @__PURE__ */ e(
+      y,
+      {
+        searchLoading: r.isLoading,
+        searchTerm: r.searchTerm,
+        results: r.results,
+        children: a
+      }
+    ),
+    /* @__PURE__ */ e(S, { children: [
+      /* @__PURE__ */ e(u, { children: [
+        /* @__PURE__ */ e(i, { keyNames: ["Esc"] }),
+        "to close"
+      ] }),
+      /* @__PURE__ */ e(u, { children: [
+        /* @__PURE__ */ e(i, { keyNames: ["Tab"] }),
+        /* @__PURE__ */ e("span", { children: "or" }),
+        /* @__PURE__ */ e(i, { keyNames: ["↑", "↓"] }),
+        "to navigate"
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  W as default
+};

package/dist/components/preact/SearchModal/types/search.types.d.ts

@@ -0,0 +1,25 @@
+import { ComponentChildren } from 'preact';
+import { IconName } from '../../Icon';
+export interface ResultProps {
+    icon: IconName;
+    title: string;
+    content_type?: string;
+    url: string;
+    excerpt?: string;
+}
+export interface SearchWindowProps {
+    searchLoading: boolean;
+    searchTerm?: string;
+    results?: ResultProps[];
+    children: ComponentChildren;
+}
+export interface SearchResultsProps {
+    searchLoading: boolean;
+    searchTerm?: string;
+    results?: ResultProps[];
+}
+export interface SearchState {
+    searchTerm: string;
+    results: ResultProps[];
+    isLoading: boolean;
+}

package/dist/components/preact/SearchModal/types/search.types.js

@@ -0,0 +1 @@
+

package/dist/components/preact/SearchModal/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { IconName } from '../../Icon';
+export declare function getSiteIcon(contentType?: string): IconName;

package/dist/components/preact/SearchModal/utils/index.js

@@ -0,0 +1,11 @@
+const i = {
+  blog: "book",
+  changelog: "rss",
+  doc: "pageWithLines"
+};
+function o(e) {
+  return e && i[e] || "pageWithLines";
+}
+export {
+  o as getSiteIcon
+};

package/dist/components/preact/index.d.ts

@@ -0,0 +1,8 @@
+export { default as KeyboardKey } from './KeyboardKey';
+export { default as Modal } from './Modal';
+export { default as Icon } from './Icon';
+export { default as SearchLink } from './SearchModal/components/SearchLink';
+export { default as SearchHeading } from './SearchModal/components/SearchHeading';
+export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
+export { default as SearchModal } from './SearchModal';
+export { type IconName } from './Icon';

package/dist/components/preact/index.js

@@ -0,0 +1,16 @@
+import { default as o } from "./KeyboardKey/index.js";
+import { default as f } from "./Modal/index.js";
+import { default as d } from "./Icon/index.js";
+import { default as m } from "./SearchModal/components/SearchLink.js";
+import { default as s } from "./SearchModal/components/SearchHeading.js";
+import { default as x } from "./SearchModal/components/SearchToggle/SearchToggle.js";
+import { default as h } from "./SearchModal/index.js";
+export {
+  d as Icon,
+  o as KeyboardKey,
+  f as Modal,
+  s as SearchHeading,
+  m as SearchLink,
+  h as SearchModal,
+  x as SearchToggle
+};

package/dist/hooks.module-ExpuRnbo.js

@@ -0,0 +1,131 @@
+import { options as w } from "preact";
+var v, u, H, y, s = 0, C = [], n = w, A = n.__b, F = n.__r, g = n.diffed, k = n.__c, q = n.unmount, T = n.__;
+function d(_, t) {
+  n.__h && n.__h(u, _, s || t), s = 0;
+  var r = u.__H || (u.__H = { __: [], __h: [] });
+  return _ >= r.__.length && r.__.push({}), r.__[_];
+}
+function S(_) {
+  return s = 1, x(W, _);
+}
+function x(_, t, r) {
+  var o = d(v++, 2);
+  if (o.t = _, !o.__c && (o.__ = [r ? r(t) : W(void 0, t), function(c) {
+    var e = o.__N ? o.__N[0] : o.__[0], f = o.t(e, c);
+    e !== f && (o.__N = [f, o.__[1]], o.__c.setState({}));
+  }], o.__c = u, !u.__f)) {
+    var a = function(c, e, f) {
+      if (!o.__c.__H) return !0;
+      var m = o.__c.__H.__.filter(function(i) {
+        return !!i.__c;
+      });
+      if (m.every(function(i) {
+        return !i.__N;
+      })) return !h || h.call(this, c, e, f);
+      var E = o.__c.props !== c;
+      return m.forEach(function(i) {
+        if (i.__N) {
+          var j = i.__[0];
+          i.__ = i.__N, i.__N = void 0, j !== i.__[0] && (E = !0);
+        }
+      }), h && h.call(this, c, e, f) || E;
+    };
+    u.__f = !0;
+    var h = u.shouldComponentUpdate, N = u.componentWillUpdate;
+    u.componentWillUpdate = function(c, e, f) {
+      if (this.__e) {
+        var m = h;
+        h = void 0, a(c, e, f), h = m;
+      }
+      N && N.call(this, c, e, f);
+    }, u.shouldComponentUpdate = a;
+  }
+  return o.__N || o.__;
+}
+function G(_, t) {
+  var r = d(v++, 3);
+  !n.__s && b(r.__H, t) && (r.__ = _, r.u = t, u.__H.__h.push(r));
+}
+function I(_) {
+  return s = 5, z(function() {
+    return { current: _ };
+  }, []);
+}
+function z(_, t) {
+  var r = d(v++, 7);
+  return b(r.__H, t) && (r.__ = _(), r.__H = t, r.__h = _), r.__;
+}
+function B() {
+  for (var _; _ = C.shift(); ) if (_.__P && _.__H) try {
+    _.__H.__h.forEach(l), _.__H.__h.forEach(p), _.__H.__h = [];
+  } catch (t) {
+    _.__H.__h = [], n.__e(t, _.__v);
+  }
+}
+n.__b = function(_) {
+  u = null, A && A(_);
+}, n.__ = function(_, t) {
+  _ && t.__k && t.__k.__m && (_.__m = t.__k.__m), T && T(_, t);
+}, n.__r = function(_) {
+  F && F(_), v = 0;
+  var t = (u = _.__c).__H;
+  t && (H === u ? (t.__h = [], u.__h = [], t.__.forEach(function(r) {
+    r.__N && (r.__ = r.__N), r.u = r.__N = void 0;
+  })) : (t.__h.forEach(l), t.__h.forEach(p), t.__h = [], v = 0)), H = u;
+}, n.diffed = function(_) {
+  g && g(_);
+  var t = _.__c;
+  t && t.__H && (t.__H.__h.length && (C.push(t) !== 1 && y === n.requestAnimationFrame || ((y = n.requestAnimationFrame) || D)(B)), t.__H.__.forEach(function(r) {
+    r.u && (r.__H = r.u), r.u = void 0;
+  })), H = u = null;
+}, n.__c = function(_, t) {
+  t.some(function(r) {
+    try {
+      r.__h.forEach(l), r.__h = r.__h.filter(function(o) {
+        return !o.__ || p(o);
+      });
+    } catch (o) {
+      t.some(function(a) {
+        a.__h && (a.__h = []);
+      }), t = [], n.__e(o, r.__v);
+    }
+  }), k && k(_, t);
+}, n.unmount = function(_) {
+  q && q(_);
+  var t, r = _.__c;
+  r && r.__H && (r.__H.__.forEach(function(o) {
+    try {
+      l(o);
+    } catch (a) {
+      t = a;
+    }
+  }), r.__H = void 0, t && n.__e(t, r.__v));
+};
+var U = typeof requestAnimationFrame == "function";
+function D(_) {
+  var t, r = function() {
+    clearTimeout(o), U && cancelAnimationFrame(t), setTimeout(_);
+  }, o = setTimeout(r, 100);
+  U && (t = requestAnimationFrame(r));
+}
+function l(_) {
+  var t = u, r = _.__c;
+  typeof r == "function" && (_.__c = void 0, r()), u = t;
+}
+function p(_) {
+  var t = u;
+  _.__c = _.__(), u = t;
+}
+function b(_, t) {
+  return !_ || _.length !== t.length || t.some(function(r, o) {
+    return r !== _[o];
+  });
+}
+function W(_, t) {
+  return typeof t == "function" ? t(_) : t;
+}
+export {
+  I as A,
+  S as d,
+  G as y
+};

package/dist/jsxRuntime.module-Bzuv3cXw.js

@@ -0,0 +1,13 @@
+import { options as i } from "preact";
+var v = 0;
+function t(f, _, u, c, l, p) {
+  _ || (_ = {});
+  var n, o, r = _;
+  if ("ref" in r) for (o in r = {}, _) o == "ref" ? n = _[o] : r[o] = _[o];
+  var e = { type: f, props: r, key: u, ref: n, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: void 0, __v: --v, __i: -1, __u: 0, __source: l, __self: p };
+  if (typeof f == "function" && (n = f.defaultProps)) for (o in n) r[o] === void 0 && (r[o] = n[o]);
+  return i.vnode && i.vnode(e), e;
+}
+export {
+  t as u
+};

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { pluralize } from './pluralize';

package/dist/utils/pluralize.d.ts

@@ -0,0 +1 @@
+export declare const pluralize: (count: number, singular: string, plural: string) => string;

package/dist/utils/useClickOutside.d.ts

@@ -0,0 +1 @@
+export declare function useClickOutside<T extends HTMLElement>(callback: () => void): import('preact').RefObject<T>;

package/dist/utils/useTimeout.d.ts

@@ -0,0 +1,4 @@
+export declare function useTimeout(callback: (latestValue: string) => void, delay: number): {
+    reset: () => void;
+    run: (latestValue: string) => void;
+};

package/package.json

@@ -1,34 +1,58 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.8",
+  "version": "0.0.11",
+  "type": "module",
+  "main": "dist/components/preact/index.js",
+  "types": "dist/components/preact/index.d.ts",
   "scripts": {
     "build:tokens": "npx tz build",
+    "build:vite": "vite build",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.astro",
     "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx,.astro --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,astro,json,css,md,mdx}\" --ignore-path packages/styles/tokens.css",
-    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,astro,json,css,md,mdx}\" --ignore-path packages/styles/tokens.css"
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,astro,json,css,md,mdx}\" --ignore-path packages/styles/tokens.css",
+    "prepublishOnly": "npm run build:vite"
   },
   "files": [
     "packages/",
+    "dist",
     "README.md"
   ],
   "exports": {
-    "./logo": "./packages/assets/logos/full/large/lightmode/logo-netlify-large-fullcolor-lightmode.svg",
+    "./preact": "./dist/components/preact/index.js",
+    "./logos/*.svg": "./packages/assets/logos/*.svg",
     "./styles/*.css": "./packages/styles/*.css",
+    "./components/search": "./packages/components/search/components/index.ts",
     "./components": "./packages/components/index.ts",
     "./utils": "./packages/utils/index.ts"
   },
+  "dependencies": {
+    "@preact/preset-vite": "^2.10.1",
+    "glob": "^11.0.1",
+    "preact": "^10.26.4",
+    "vite": "^6.2.5",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-lib-inject-css": "^2.2.1"
+  },
   "devDependencies": {
     "@terrazzo/cli": "^0.6.3",
     "@terrazzo/plugin-css": "^0.6.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
     "@typescript-eslint/eslint-plugin": "^8.26.0",
     "@typescript-eslint/parser": "^8.26.0",
     "astro-eslint-parser": "^1.2.1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-astro": "^1.3.1",
+    "preact": "^10.26.4",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
-  }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
 }

package/packages/components/index.ts

@@ -1 +1,10 @@
+export { default as KeyboardKey } from './preact/KeyboardKey';
+export { default as Modal } from './preact/Modal';
+export { default as Icon } from './preact/Icon';
+export { default as SearchLink } from './preact/SearchModal/components/SearchLink';
+export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading';
+export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
+export { default as SearchModal } from './preact/SearchModal';
 export { default as Tabs } from './Tabs.astro';
+
+export { type IconName } from './preact/Icon';