@netlify/spark-ui 0.0.26 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/assets/SearchModal.css +1 -1
  2. package/dist/components/preact/SearchModal/components/SearchWindow.js +16 -9
  3. package/dist/components/preact/SearchModal/hooks/useSearch.js +7 -7
  4. package/package.json +1 -1
  5. package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css +10 -6
  6. package/packages/components/preact/SearchModal/components/SearchWindow.tsx +9 -5
  7. package/packages/components/preact/SearchModal/hooks/useSearch.ts +1 -1
package/dist/assets/SearchModal.css CHANGED
@@ -1 +1 @@
1
- .n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{padding-inline:1rem;margin-block:var(--space-xs);font-size:var(--step--2);font-weight:var(--font-regular);color:var(--color-text-3)}.n-search-link{all:unset;display:flex;flex-wrap:wrap;row-gap:var(--space-3xs);padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1rem);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link-header{display:flex;justify-content:space-between;width:100%;align-items:center}.n-search-link-label{display:flex;align-items:center;gap:var(--space-s);font-weight:var(--font-semibold, 680);color:var(--color-text-2)}.n-search-link-excerpt{color:var(--color-text-3);line-height:1.3;font-size:.9em;padding-inline-start:var(--space-l)}.n-search-link-icon{display:flex;width:1em;height:auto;height:1em}.n-search-link-icon [data-icon=caretRight]{width:10px;color:var(--n-search-color-text-secondary)}.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-2, currentColor);--n-search-color-bg: var(--color-bg-1);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--color-text-accent)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin-inline:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{all:unset;display:flex;width:100%}.n-search-input{display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem}.n-search-input::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline)}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:1em;height:auto;color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-medium);font-size:1.1em}.n-search-window{height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list,ul[role=list]{list-style:none;padding:0}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.n-search-footer-tip{--n-key-text-color: var(--n-search-color-text-secondary);color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--step--1)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}
1
+ .n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{padding-inline:1rem;margin-block:var(--space-xs);font-size:var(--step--2);font-weight:var(--font-regular);color:var(--color-text-3)}.n-search-link{all:unset;display:flex;flex-wrap:wrap;row-gap:var(--space-3xs);padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1rem);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link-header{display:flex;justify-content:space-between;width:100%;align-items:center}.n-search-link-label{display:flex;align-items:center;gap:var(--space-s);font-weight:var(--font-semibold, 680);color:var(--color-text-2)}.n-search-link-excerpt{color:var(--color-text-3);line-height:1.3;font-size:.9em;padding-inline-start:var(--space-l)}.n-search-link-icon{display:flex;width:1em;height:auto;height:1em}.n-search-link-icon [data-icon=caretRight]{width:10px;color:var(--n-search-color-text-secondary)}.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-2, currentColor);--n-search-color-bg: var(--color-bg-1);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--color-text-accent)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin-inline:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{all:unset;display:flex;width:100%;border-bottom:1px solid var(--n-search-color-border)}.n-search-input{display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem;color:var(--color-text-1)}.n-search-input::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--icon-size, 1em);height:var(--icon-size, 1em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-medium);font-size:1.1em}.n-search-window{height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list,ul[role=list]{list-style:none;padding:0}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.n-search-footer-tip{--n-key-text-color: var(--n-search-color-text-secondary);color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--step--1)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}
package/dist/components/preact/SearchModal/components/SearchWindow.js CHANGED
@@ -4,27 +4,27 @@ import t from "./SearchHeading/SearchHeading.js";
4
4
  import a from "./SearchLink/SearchLink.js";
5
5
  const h = ({
6
6
  searchLoading: i,
7
- searchTerm: n,
8
- results: r
7
+ searchTerm: r,
8
+ results: n
9
9
  }) => {
10
10
  if (i)
11
11
  return /* @__PURE__ */ e(t, { children: [
12
12
  "Searching for ",
13
- /* @__PURE__ */ e("span", { className: "n-search-term", children: n }),
13
+ /* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
14
14
  " ..."
15
15
  ] });
16
- if (!r || r.length === 0)
16
+ if (!n || n.length === 0)
17
17
  return /* @__PURE__ */ e(t, { children: [
18
18
  "0 results for ",
19
- /* @__PURE__ */ e("span", { className: "n-search-term", children: n })
19
+ /* @__PURE__ */ e("span", { className: "n-search-term", children: r })
20
20
  ] });
21
- const l = o(() => r.map((s, c) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...s }) }, c)), [r]);
21
+ const l = o(() => n.map((s, c) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...s }) }, c)), [n]);
22
22
  return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: l });
23
23
  };
24
24
  function N({
25
25
  searchLoading: i,
26
- searchTerm: n,
27
- results: r,
26
+ searchTerm: r,
27
+ results: n,
28
28
  children: l
29
29
  }) {
30
30
  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: [
@@ -33,7 +33,14 @@ function N({
33
33
  label: "Ask Netlify AI",
34
34
  url: "https://docs.netlify.com/ask-netlify/"
35
35
  } }),
36
- n ? /* @__PURE__ */ e(h, { searchLoading: i, searchTerm: n, results: r }) : l || null
36
+ r && r.length > 3 ? /* @__PURE__ */ e(
37
+ h,
38
+ {
39
+ searchLoading: i,
40
+ searchTerm: r,
41
+ results: n
42
+ }
43
+ ) : l || null
37
44
  ] }) });
38
45
  }
39
46
  export {
package/dist/components/preact/SearchModal/hooks/useSearch.js CHANGED
@@ -1,5 +1,5 @@
1
- import { A as u, y as p, d as w } from "../../../../chunks/hooks.module.BFfOesdf.js";
2
- import { getSiteIcon as S } from "../utils/index.js";
1
+ import { A as u, y as p, d as S } from "../../../../chunks/hooks.module.BFfOesdf.js";
2
+ import { getSiteIcon as w } from "../utils/index.js";
3
3
  function T(s, r) {
4
4
  const t = u(null), c = u("");
5
5
  return p(() => () => {
@@ -13,8 +13,8 @@ function T(s, r) {
13
13
  );
14
14
  } };
15
15
  }
16
- function R() {
17
- const [s, r] = w({
16
+ function x() {
17
+ const [s, r] = S({
18
18
  searchTerm: "",
19
19
  results: [],
20
20
  isLoading: !1
@@ -30,12 +30,12 @@ function R() {
30
30
  }));
31
31
  return;
32
32
  }
33
- const i = await window.pagefind.search(e), g = await Promise.all(
33
+ const i = await window.pagefind.debouncedSearch(e), g = await Promise.all(
34
34
  i.results.slice(0, 15).map(async (n) => {
35
35
  var m, f, d;
36
36
  const a = await n.data();
37
37
  return {
38
- icon: S((m = a.meta) == null ? void 0 : m.content_type),
38
+ icon: w((m = a.meta) == null ? void 0 : m.content_type),
39
39
  content_type: (f = a.meta) == null ? void 0 : f.content_type,
40
40
  label: (d = a.meta) == null ? void 0 : d.title,
41
41
  url: a.url,
@@ -60,5 +60,5 @@ function R() {
60
60
  };
61
61
  }
62
62
  export {
63
- R as useSearch
63
+ x as useSearch
64
64
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@netlify/spark-ui",
3
3
  "description": "Assets, design tokens, components, and utilities",
4
- "version": "0.0.26",
4
+ "version": "0.0.28",
5
5
  "type": "module",
6
6
  "main": "dist/components/preact/index.js",
7
7
  "types": "dist/components/preact/index.d.ts",
package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css CHANGED
@@ -46,6 +46,7 @@
46
46
  all: unset;
47
47
  display: flex;
48
48
  width: 100%;
49
+ border-bottom: 1px solid var(--n-search-color-border);
49
50
  }
50
51
 
51
52
  .n-search-input {
@@ -59,6 +60,7 @@
59
60
  border: none;
60
61
  outline: none;
61
62
  font-size: 1rem;
63
+ color: var(--color-text-1)
62
64
  }
63
65
 
64
66
  .n-search-input::placeholder {
@@ -68,6 +70,7 @@
68
70
  .n-search-label {
69
71
  display: flex;
70
72
  padding-inline: var(--n-search-padding-inline);
73
+ align-items: center;
71
74
  }
72
75
 
73
76
  .n-search-label > * {
@@ -77,8 +80,8 @@
77
80
 
78
81
  .n-search-icon {
79
82
  display: flex;
80
- width: 1em;
81
- height: auto;
83
+ width: var(--icon-size, 1em);
84
+ height: var(--icon-size, 1em);
82
85
  color: var(--n-search-color-text-secondary);
83
86
  }
84
87
 
@@ -127,13 +130,14 @@
127
130
  font-size: var(--step--1);
128
131
  }
129
132
 
130
- /* Animations */
133
+ /* Animations */
131
134
  .n-search-modal {
132
135
  transition: display .2s allow-discrete, overlay .2s allow-discrete;
133
136
  animation: closeSearch .2s forwards;
134
- &[open] {
135
- animation: openSearch .2s forwards;
136
- }
137
+ }
138
+
139
+ .n-search-modal[open] {
140
+ animation: openSearch .2s forwards;
137
141
  }
138
142
 
139
143
  @keyframes openSearch {
package/packages/components/preact/SearchModal/components/SearchWindow.tsx CHANGED
@@ -20,9 +20,9 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
20
20
 
21
21
  if (!results || results.length === 0) {
22
22
  return (
23
- <SearchHeading>
24
- 0 results for <span className="n-search-term">{searchTerm}</span>
25
- </SearchHeading>
23
+ <SearchHeading>
24
+ 0 results for <span className="n-search-term">{searchTerm}</span>
25
+ </SearchHeading>
26
26
  );
27
27
  }
28
28
 
@@ -58,8 +58,12 @@ export default function SearchWindow({
58
58
  <div className="n-search-window">
59
59
  <div className="search-links">
60
60
  <SearchLink {...askNetlify} />
61
- {searchTerm ? (
62
- <SearchResults searchLoading={searchLoading} searchTerm={searchTerm} results={results} />
61
+ {searchTerm && searchTerm.length > 3 ? (
62
+ <SearchResults
63
+ searchLoading={searchLoading}
64
+ searchTerm={searchTerm}
65
+ results={results}
66
+ />
63
67
  ) : DefaultWindow ? (
64
68
  DefaultWindow
65
69
  ) : null}
package/packages/components/preact/SearchModal/hooks/useSearch.ts CHANGED
@@ -40,7 +40,7 @@ export function useSearch() {
40
40
  }));
41
41
  return;
42
42
  }
43
- const search = await window.pagefind.search(query);
43
+ const search = await window.pagefind.debouncedSearch(query);
44
44
  const results = await Promise.all(
45
45
  search.results.slice(0, 15).map(async (result: any) => {
46
46
  const data = await result.data();