@netlify/spark-ui 1.0.3-alpha.1 → 1.1.0

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

@@ -1,53 +1,48 @@
-import { u as n } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { T as h } from "../../../../chunks/hooks.module.DeYLzLnU.js";
-import s from "./SearchHeading/SearchHeading.js";
-import m from "./SearchLink/SearchLink.js";
-import a from "../../Icon/index.js";
-import { Fragment as o } from "preact";
-const d = ({
-  searchLoading: l,
+import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { T as o } from "../../../../chunks/hooks.module.CNV9mxng.js";
+import t from "./SearchHeading/SearchHeading.js";
+import a from "./SearchLink/SearchLink.js";
+const h = ({
+  searchLoading: s,
   searchTerm: r,
-  results: e
+  results: n
 }) => {
-  if (l)
-    return /* @__PURE__ */ n(s, { children: [
+  if (s)
+    return /* @__PURE__ */ e(t, { children: [
       "Searching for ",
-      /* @__PURE__ */ n("span", { className: "n-search-term", children: r }),
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
       " ..."
     ] });
-  if (!e || e.length === 0)
-    return /* @__PURE__ */ n(s, { children: [
+  if (!n || n.length === 0)
+    return /* @__PURE__ */ e(t, { children: [
       "0 results for ",
-      /* @__PURE__ */ n("span", { className: "n-search-term", children: r })
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: r })
     ] });
-  const c = h(() => e.map((i, t) => /* @__PURE__ */ n("li", { className: "n-results-list-item", children: /* @__PURE__ */ n(m, { ...i }) }, t)), [e]);
-  return /* @__PURE__ */ n("ul", { className: "n-results-list", role: "list", children: c });
+  const l = o(() => n.map((i, c) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...i }) }, c)), [n]);
+  return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: l });
 };
-function S({
-  setModalState: l,
-  searchLoading: r,
-  searchTerm: e,
-  results: c,
-  children: i
+function p({
+  searchLoading: s,
+  searchTerm: r,
+  results: n,
+  children: l
 }) {
-  return /* @__PURE__ */ n("div", { className: "n-search-window", children: /* @__PURE__ */ n("div", { className: "search-links", children: e && e.length > 1 ? /* @__PURE__ */ n(d, { searchLoading: r, searchTerm: e, results: c }) : i ? /* @__PURE__ */ n(o, { children: [
-    /* @__PURE__ */ n(
-      "button",
+  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: [
+    /* @__PURE__ */ e(a, { ...{
+      icon: "sparkles",
+      label: "Ask Netlify AI",
+      url: "https://docs.netlify.com/ask-netlify/"
+    } }),
+    r && r.length > 1 ? /* @__PURE__ */ e(
+      h,
       {
-        class: "btn-ask-netlify n-search-link",
-        onClick: () => {
-          l({ current: "ask" });
-        },
-        children: [
-          /* @__PURE__ */ n("span", { className: "n-search-link-icon", children: /* @__PURE__ */ n(a, { name: "netlify" }) }),
-          /* @__PURE__ */ n("div", { className: "n-search-link-body", children: /* @__PURE__ */ n("p", { className: "n-search-link-title", children: "Ask Netlify AI" }) }),
-          /* @__PURE__ */ n("div", { className: "n-search-link-icon", children: /* @__PURE__ */ n(a, { name: "caretRight" }) })
-        ]
+        searchLoading: s,
+        searchTerm: r,
+        results: n
       }
-    ),
-    i
-  ] }) : null }) });
+    ) : l || null
+  ] }) });
 }
 export {
-  S as default
+  p as default
 };

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

@@ -1,6 +1,6 @@
-import { y as f } from "../../../../chunks/hooks.module.DeYLzLnU.js";
-function k(r, t, o, c) {
-  f(() => {
+import { y as l } from "../../../../chunks/hooks.module.CNV9mxng.js";
+function s(r, t, o, c) {
+  l(() => {
     if (!r) return;
     const u = (e) => {
       if (o) {
@@ -12,8 +12,8 @@ function k(r, t, o, c) {
           e.preventDefault();
           const d = t.current;
           if (!d) return;
-          const n = Array.from(d.querySelectorAll(".n-search-link")), y = n.findIndex((l) => l === document.activeElement), i = e.key === "ArrowDown" ? (y + 1) % n.length : (y - 1 + n.length) % n.length;
-          n[i].focus();
+          const n = Array.from(d.querySelectorAll("a")), y = n.findIndex((i) => i === document.activeElement), f = e.key === "ArrowDown" ? (y + 1) % n.length : (y - 1 + n.length) % n.length;
+          n[f].focus();
         }
       }
     };
@@ -21,5 +21,5 @@ function k(r, t, o, c) {
   }, [r, t, o, c]);
 }
 export {
-  k as useKeyboardNav
+  s as useKeyboardNav
 };

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

@@ -1,5 +1,5 @@
-import { d as g, A as w } from "../../../../chunks/hooks.module.DeYLzLnU.js";
-import { u as S } from "../../../../chunks/useTimeout.DYuvQwFN.js";
+import { d as g, A as w } from "../../../../chunks/hooks.module.CNV9mxng.js";
+import { u as S } from "../../../../chunks/useTimeout.DOkYFG64.js";
 function x() {
   const [l, r] = g({
     searchTerm: "",

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

@@ -1,4 +1,4 @@
-import { y as u } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+import { y as u } from "../../../../chunks/hooks.module.CNV9mxng.js";
 function a(t, r, n, o) {
   u(() => {
     if (!t) return;

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

@@ -1,4 +1,4 @@
-import { A as y, y as h, q as k } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+import { A as y, y as h, q as k } from "../../../../chunks/hooks.module.CNV9mxng.js";
 class s {
   /**
    * Pushes an event payload into the dataLayer.

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

@@ -1,4 +1,4 @@
-import { y as c } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+import { y as c } from "../../../../chunks/hooks.module.CNV9mxng.js";
 function n(r, o, a) {
   c(() => {
     if (typeof location > "u" || r) return;

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

@@ -1,4 +1,4 @@
-import { y as l } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+import { y as l } from "../../../../chunks/hooks.module.CNV9mxng.js";
 function i(c, r) {
   l(() => {
     if (!c) return;

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

@@ -8,9 +8,6 @@ export interface SearchLinkProps {
     excerpt?: string;
 }
 export interface SearchWindowProps {
-    setModalState: (e: {
-        current: string;
-    }) => void;
     searchLoading: boolean;
     searchTerm?: string;
     results?: SearchLinkProps[];

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

@@ -4,6 +4,5 @@ export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink/SearchLink';
 export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
-export { default as AskNetlify } from './AskNetlify/AskNetlify';
 export { SearchModal } from './SearchModal';
 export { type IconName } from './Icon';

package/dist/components/preact/index.js

@@ -3,18 +3,16 @@ import { default as d } from "./Modal/Modal.js";
 import { default as m } from "./Icon/index.js";
 import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js";
 import { default as x } from "./SearchModal/components/SearchHeading/SearchHeading.js";
-import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { default as S } from "./AskNetlify/AskNetlify.js";
+import { default as h } from "./SearchModal/components/SearchToggle/SearchToggle.js";
 import "preact";
-import "../../chunks/hooks.module.DeYLzLnU.js";
-import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";
+import "../../chunks/hooks.module.CNV9mxng.js";
+import { default as S } from "./SearchModal/components/SearchModal/SearchModal.js";
 export {
-  S as AskNetlify,
   m as Icon,
   t as KeyboardKey,
   d as Modal,
   x as SearchHeading,
   s as SearchLink,
-  n as SearchModal,
-  i as SearchToggle
+  S as SearchModal,
+  h as SearchToggle
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.0.3-alpha.1",
+  "version": "1.1.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -33,11 +33,9 @@
     "./analytics": "./packages/analytics/index.ts"
   },
   "dependencies": {
-    "@kapaai/react-sdk": "^0.0.5",
     "@preact/preset-vite": "^2.10.1",
     "@shikijs/transformers": "^3.3.0",
     "glob": "^11.0.1",
-    "marked": "^15.0.11",
     "preact": "^10.26.4",
     "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
@@ -66,4 +64,4 @@
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
   }
-}
+}

package/packages/components/Blockquote.astro

@@ -0,0 +1,103 @@
+---
+interface Props {
+  quote?: string;
+  author?: string;
+  title?: string;
+  variant?: 'default' | 'simple';
+}
+
+const { quote, variant = 'default', author, title, class: className, ...rest } = Astro.props;
+
+/**
+ * If quote is added via <slot />, trim surrounding whitespace so that quotation marks properly wrap inline with the text string.
+ * Also set prettier-ignore to prevent wrapping of <blockquote> contents which can produce whitespace.
+ */
+let html = '';
+if (Astro.slots.has('default')) {
+  html = await Astro.slots.render('default');
+  html = html.trim();
+}
+---
+
+<figure class={className} data-blockquote-variant={variant} {...rest}>
+  <!-- prettier-ignore -->
+  <blockquote>{quote ? quote : <Fragment set:html={html} />}</blockquote>
+  {
+    author || title ? (
+      <figcaption>
+        {author && <span>{author}</span>}
+        {title && <span>{title}</span>}
+      </figcaption>
+    ) : null
+  }
+</figure>
+
+<style>
+  figure {
+    --_gap: var(--space-s);
+    display: grid;
+    gap: var(--_gap);
+    padding-inline-start: var(--_gap);
+    border-inline-start: 3px solid var(--color-icon);
+    font-size: var(--font-size-display-2xs);
+    font-family: var(--font-family-display);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-heading);
+  }
+
+  blockquote {
+    quotes: '“' '”' '‘' '’';
+    text-indent: -0.45em; /* Adjusts for hanging punctuation */
+    text-wrap: pretty;
+  }
+
+  @​supports (hanging-punctuation: first) {
+    blockquote {
+      text-indent: 0;
+      hanging-punctuation: first;
+    }
+  }
+
+  blockquote::before {
+    content: open-quote;
+  }
+
+  blockquote::after {
+    content: close-quote;
+  }
+
+  figcaption {
+    display: flex;
+    gap: 0.2em;
+    font-size: var(--font-size-text-xs);
+    line-height: var(--line-height-heading);
+  }
+
+  /* Variants */
+  [data-blockquote-variant='default'] {
+    figcaption {
+      flex-direction: column;
+      font-weight: var(--font-weight-regular);
+    }
+
+    figcaption > * {
+      display: block;
+      font-family: var(--font-family-mono);
+      text-transform: uppercase;
+    }
+
+    figcaption > *:last-child:not(:only-child) {
+      color: var(--color-text-weak);
+    }
+  }
+
+  [data-blockquote-variant='simple'] {
+    figcaption > * {
+      font-size: var(--font-size-text-sm);
+    }
+
+    figcaption > *:not(:last-child)::after {
+      content: ',';
+    }
+  }
+</style>

package/packages/components/index.ts

@@ -6,5 +6,4 @@ export { default as SearchLink } from './preact/SearchModal/components/SearchLin
 export { default as SearchHeading } from './preact/SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './preact/SearchModal/components/SearchToggle/SearchToggle';
 export { default as SearchModal } from './preact/SearchModal/components/SearchModal/SearchModal';
-export { default as ChatApp } from './preact/ChatApp/ChatApp';
 export { type IconName } from './preact/Icon';

package/packages/components/preact/SearchModal/components/SearchInput.tsx

@@ -6,22 +6,20 @@ interface Props {
   setSearchTerm: (term: string) => void;
   placeholder?: string;
   initialValue?: string;
-  isGeneratingAnswer?: boolean;
-  isPreparingAnswer?: boolean;
 }
 
 const SearchInput = (props: Props) => {
   const [value, setValue] = useState<string>('');
 
-  const { reset, run } = useTimeout((query: string) => {
-    props.setSearchTerm(query);
-  }, 300);
-
-  const handleInput = (e: InputEvent) => {
+    const { reset, run } = useTimeout((query: string) => {
+      props.setSearchTerm(query);
+    }, 300);
+    
+    const handleInput = (e: InputEvent) => {
     const target = e.target as HTMLInputElement;
     setValue(target.value);
-    reset();
-    run(target.value);
+    reset()
+    run(target.value)
   };
 
   useEffect(() => {

package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css

@@ -1,7 +1,6 @@
 .n-search-link {
   --n-search-icon-size: 1em;
-  /* all: unset; */
-  box-sizing: border-box;
+  all: unset;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
@@ -12,10 +11,6 @@
   font-weight: var(--font-weight-regular);
   text-decoration: none;
   cursor: pointer;
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline: none;
 }
 
 .n-search-link-body {

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css

@@ -4,18 +4,15 @@
 
 /* Root Variables */
 .n-search-modal {
-  --n-search-padding-inline: var(--space-s);
+  --n-search-padding-inline: 0.5em;
   --n-search-color-text: var(--color-text, currentColor);
   --n-search-color-text-secondary: var(--color-text-weak, currentColor);
   --n-search-color-bg: var(--color-bg);
   --n-search-color-bg-2: var(--color-bg-2);
   --n-search-color-border: var(--color-bg-3);
-  --n-search-border-radius: 1.3rem;
+  --n-search-border-radius: 8px;
   --n-search-max-w: 600px;
   --n-search-text-highlight: var(--color-text-accent);
-  --n-search-input-height: 50px;
-  --n-search-footer-height: 40px;
-  --n-search-container-height: 400px;
 }
 
 .n-search-modal {
@@ -26,30 +23,11 @@
   margin: auto;
 }
 
-.n-search-modal::after {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: blue;
-  position: absolute;
-  z-index: 0;
-  inset: 0;
-  transform-origin: center;
-  transform: scale(0);
-  border-radius: var(--radius-m);
-  transition: transform 300ms ease-in-out;
-}
-
-.n-search-modal-ask {
-  --n-search-max-w: 800px;
-}
-
 .n-search-container {
   --mark-bg: var(--n-search-text-highlight);
   display: grid;
   width: min(var(--n-search-max-w), 100%);
-  /* min-height: 530px; */
+  min-height: 470px;
   background-color: var(--n-search-color-bg);
   border-radius: var(--n-search-border-radius);
   overflow: hidden;
@@ -65,15 +43,13 @@
 }
 
 .n-search-input-wrapper {
-  /* all: unset; */
-  position: relative;
+  all: unset;
   display: flex;
   width: 100%;
-  height: var(--n-search-input-height);
+  border-bottom: 1px solid var(--n-search-color-border);
 }
 
 .n-search-input {
-  position: relative;
   display: inline-flex;
   box-sizing: border-box;
   background: var(--n-search-color-bg);
@@ -87,25 +63,13 @@
   color: var(--color-text);
 }
 
-.n-search-input-wrapper::after,
-.n-search-footer::after {
-  content: '';
-  display: block;
-  width: 200%;
-  height: 1px;
-  background: var(--n-search-color-border);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
 .n-search-input::placeholder {
   color: var(--n-search-color-text);
 }
 
 .n-search-label {
   display: flex;
-  padding-inline-start: var(--n-search-padding-inline);
+  padding-inline: var(--n-search-padding-inline);
   align-items: center;
 }
 
@@ -128,7 +92,7 @@
 
 /* Search Results */
 .n-search-window {
-  height: var(--n-search-container-height);
+  height: 400px;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -151,15 +115,11 @@ ul[role='list'] {
 
 /* Footer */
 .n-search-footer {
-  position: relative;
+  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);
-  padding: var(--space-2xs) var(--space-s);
-  height: var(--n-search-footer-height);
-}
-
-.n-search-footer::after {
-  top: 0;
 }
 
 .n-search-footer-tip {
@@ -174,8 +134,7 @@ ul[role='list'] {
 .n-search-modal {
   transition:
     display 0.2s allow-discrete,
-    overlay 0.2s allow-discrete,
-    width 0.3s ease-in-out;
+    overlay 0.2s allow-discrete;
   animation: closeSearch 0.2s forwards;
 }
 
@@ -183,21 +142,6 @@ ul[role='list'] {
   animation: openSearch 0.2s forwards;
 }
 
-.n-search-modal[data-state='search'] > * {
-  opacity: 0;
-  animation: appearContainer 300ms ease-in-out forwards;
-  animation-delay: 300ms;
-}
-
-@keyframes appearContainer {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 @keyframes openSearch {
   from {
     opacity: 0;