@netlify/spark-ui 1.9.1 → 1.11.0

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

@@ -1,7 +1,8 @@
 interface AskNetlifyProps {
-    setModalState?: (state?: {
+    kapaIntegrationId?: string;
+    setModalState?: (e: {
         current: string;
     }) => void;
 }
-export default function AskNetlify(props: AskNetlifyProps): import("preact").JSX.Element;
+export default function AskNetlify(props: AskNetlifyProps): import("preact").JSX.Element | undefined;
 export {};

package/dist/components/preact/AskNetlify/AskNetlify.js

@@ -1,35 +1,36 @@
-import { u as t } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as a } from "../../../chunks/hooks.module.DGkdD5n9.js";
-import { C as s, K as i } from "../../../chunks/ChatInterface.BD7rlv4H.js";
-import { A as c } from "../../../chunks/analytics.Ch1vuuOl.js";
-import '../../../assets/AskNetlify.css';function k(o) {
-  const e = a(new c());
-  return /* @__PURE__ */ t(
-    i,
-    {
-      integrationId: "3c0789a6-c6a8-4fbc-b0cc-235f9e4a6351",
-      callbacks: {
-        askAI: {
-          onQuerySubmit: (r) => {
-            var n;
-            (n = e == null ? void 0 : e.current) == null || n.track("ask:new_query", {
-              question: r.question,
-              thread_id: r.threadId
-            });
-          },
-          onAnswerGenerationCompleted: (r) => {
-            var n;
-            (n = e == null ? void 0 : e.current) == null || n.track("ask:answer_generated", {
-              question_id: r.questionAnswerId,
-              answer_length: r.answer.length
-            });
+import { u as o } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { A as i } from "../../../chunks/hooks.module.DGkdD5n9.js";
+import { C as s, K as a } from "../../../chunks/ChatInterface.EQAPs01R.js";
+import { A as u } from "../../../chunks/analytics.Ch1vuuOl.js";
+import '../../../assets/AskNetlify.css';function w(n) {
+  const r = i(new u());
+  if (n.kapaIntegrationId)
+    return /* @__PURE__ */ o(
+      a,
+      {
+        integrationId: n.kapaIntegrationId,
+        callbacks: {
+          askAI: {
+            onQuerySubmit: (e) => {
+              var t;
+              !e.question || !e.threadId || (t = r == null ? void 0 : r.current) == null || t.track("ask:new_query", {
+                question: e.question,
+                thread_id: e.threadId
+              });
+            },
+            onAnswerGenerationCompleted: (e) => {
+              var t;
+              !e.questionAnswerId || !e.answer || (t = r == null ? void 0 : r.current) == null || t.track("ask:answer_generated", {
+                question_id: e.questionAnswerId,
+                answer_length: e.answer.length
+              });
+            }
           }
-        }
-      },
-      children: /* @__PURE__ */ t(s, { ...o })
-    }
-  );
+        },
+        children: /* @__PURE__ */ o(s, { setModalState: n.setModalState })
+      }
+    );
 }
 export {
-  k as default
+  w as default
 };

package/dist/components/preact/AskNetlify/components/ChatInterface.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    setModalState?: (state?: {
+    setModalState?: (e: {
         current: string;
     }) => void;
 }

package/dist/components/preact/AskNetlify/components/ChatInterface.js

@@ -1,6 +1,6 @@
 import "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import "../../../../chunks/hooks.module.DGkdD5n9.js";
-import { C as f } from "../../../../chunks/ChatInterface.BD7rlv4H.js";
+import { C as f } from "../../../../chunks/ChatInterface.EQAPs01R.js";
 import "./QuestionList/questions.js";
 import "./QuestionList/QuestionList.js";
 import "./BackButton.js";

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

@@ -3,6 +3,7 @@ interface Props {
     children: ComponentChildren;
     className?: string;
     debug?: boolean;
+    kapaIntegrationId?: string;
 }
 declare function SearchModal(props?: Props): import("preact").JSX.Element;
 export default SearchModal;

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

@@ -1,67 +1,80 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as N, y as l, d as h } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
-import w from "../../../Modal/Modal.js";
+import { A as v, y as m, d as h } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
+import b from "../../../Modal/Modal.js";
 import p from "../../../KeyboardKey/KeyboardKey.js";
-import I from "../SearchWindow.js";
-import b from "../SearchInput.js";
-import { useSearch as M } from "../../hooks/useSearch.js";
-import { useSearchLogger as O } from "../../hooks/useSearchLogger.js";
-import { useKeyboardNav as P } from "../../hooks/useKeyboardNav.js";
+import w from "../SearchWindow.js";
+import A from "../SearchInput.js";
+import M from "../SearchLink/SearchLink.js";
+import { useSearch as O } from "../../hooks/useSearch.js";
+import { useSearchLogger as P } from "../../hooks/useSearchLogger.js";
+import { useKeyboardNav as C } from "../../hooks/useKeyboardNav.js";
 import { useSearchHotkeys as E } from "../../hooks/useSearchHotkeys.js";
 import { useSearchParams as K } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as A } from "../../hooks/useSearchToggles.js";
-import C from "../../../AskNetlify/AskNetlify.js";
-import { Fragment as F } from "preact";
-import '../../../../../assets/SearchModal.css';function R(c) {
-  const r = N(null);
-  return l(() => {
+import { useSearchToggles as F } from "../../hooks/useSearchToggles.js";
+import R from "../../../AskNetlify/AskNetlify.js";
+import { Fragment as I } from "preact";
+import '../../../../../assets/SearchModal.css';function q(s) {
+  const r = v(null);
+  return m(() => {
     function i(t) {
-      r.current && !r.current.contains(t.target) && c();
+      r.current && !r.current.contains(t.target) && s();
     }
     return document.addEventListener("mousedown", i), () => {
       document.removeEventListener("mousedown", i);
     };
-  }, [c]), r;
+  }, [s]), r;
 }
-function X(c = { className: "", children: null, debug: !1 }) {
-  const [r, i] = h(!1), [t, u] = h({ current: "search" });
-  l(() => {
-    let s;
-    const o = () => {
-      window.pagefind && (i(!0), s && clearInterval(s));
+function Z(s = { className: "", children: void 0, debug: !1, kapaIntegrationId: void 0 }) {
+  const [r, i] = h(!1), [t, d] = h({ current: "search" });
+  m(() => {
+    let n;
+    const c = () => {
+      window.pagefind && (i(!0), n && clearInterval(n));
     };
-    return o(), s = setInterval(o, 100), () => clearInterval(s);
+    return c(), n = setInterval(c, 100), () => clearInterval(n);
   }, []);
-  const { children: k, className: S, debug: y, ...T } = c, { state: n, actions: g } = M(), [m, v] = h(!1), d = () => v(!0), f = () => v(!1), a = N(null), L = R(f);
-  return O(n, y), A(r, d, u), K(r, g.setSearchTerm, d), E(r, m, d, f), P(r, a, m, f), l(() => {
-    a.current && (m ? a.current.showModal() : a.current.close());
-  }, [m]), l(() => {
-    var o;
-    const s = (o = a.current) == null ? void 0 : o.querySelector("input");
-    s && s.focus(), t.current === "ask" ? setTimeout(() => {
+  const { children: N, className: k, debug: y, ...L } = s, { state: o, actions: g } = O(), [l, S] = h(!1), u = () => S(!0), f = () => S(!1), a = v(null), T = q(f);
+  return P(o, y), F(r, u, d), K(r, g.setSearchTerm, u), E(r, l, u, f), C(r, a, l, f), m(() => {
+    a.current && (l ? a.current.showModal() : a.current.close());
+  }, [l]), m(() => {
+    var c;
+    const n = (c = a.current) == null ? void 0 : c.querySelector("input");
+    n && n.focus(), t.current === "ask" ? setTimeout(() => {
       a.current.classList.add("n-search-modal-ask");
     }, 150) : t.current === "search" && setTimeout(() => {
       a.current.classList.remove("n-search-modal-ask");
     }, 150);
   }, [t.current]), /* @__PURE__ */ e(
-    w,
+    b,
     {
       ref: a,
-      className: `n-search-modal ${S || ""}`,
+      className: `n-search-modal ${k || ""}`,
       "data-state": t.current,
-      ...T,
-      children: /* @__PURE__ */ e("div", { ref: L, className: "n-search-container", children: [
-        t.current === "ask" && /* @__PURE__ */ e(C, { setModalState: u }),
-        t.current === "search" && /* @__PURE__ */ e(F, { children: [
-          /* @__PURE__ */ e(b, { setSearchTerm: g.setSearchTerm, initialValue: n.searchTerm }),
+      ...L,
+      children: /* @__PURE__ */ e("div", { ref: T, className: "n-search-container", children: [
+        t.current === "ask" && /* @__PURE__ */ e(R, { setModalState: d, kapaIntegrationId: s.kapaIntegrationId }),
+        t.current === "search" && /* @__PURE__ */ e(I, { children: [
+          /* @__PURE__ */ e(A, { setSearchTerm: g.setSearchTerm, initialValue: o.searchTerm }),
           /* @__PURE__ */ e(
-            I,
+            w,
             {
-              setModalState: u,
-              searchLoading: n.isLoading,
-              searchTerm: n.searchTerm,
-              results: n.results,
-              children: k
+              searchLoading: o.isLoading,
+              searchTerm: o.searchTerm,
+              results: o.results,
+              children: /* @__PURE__ */ e(I, { children: [
+                s.kapaIntegrationId && /* @__PURE__ */ e(
+                  M,
+                  {
+                    as: "button",
+                    icon: "askNetlify",
+                    label: "Ask Netlify AI",
+                    onClick: () => {
+                      d({ current: "ask" });
+                    }
+                  }
+                ),
+                N
+              ] })
             }
           ),
           /* @__PURE__ */ e("div", { className: "n-search-footer", children: [
@@ -82,5 +95,5 @@ function X(c = { className: "", children: null, debug: !1 }) {
   );
 }
 export {
-  X as default
+  Z as default
 };

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

@@ -1,2 +1,2 @@
 import { SearchWindowProps } from '../types/search.types';
-export default function SearchWindow({ setModalState, searchLoading, searchTerm, results, children: DefaultWindow, }: SearchWindowProps): import("preact").JSX.Element;
+export default function SearchWindow({ searchLoading, searchTerm, results, children: DefaultWindow, }: SearchWindowProps): import("preact").JSX.Element;

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

@@ -1,54 +1,42 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { T as h } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-import s from "./SearchHeading/SearchHeading.js";
+import { T as o } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import m from "./SearchHeading/SearchHeading.js";
 import a from "./SearchLink/SearchLink.js";
-import { Fragment as d } from "preact";
-const u = {
+import { Fragment as h } from "preact";
+const d = {
   light: "dark",
   dark: "light"
-}, g = (n) => {
-  const r = document.getElementById("site-theme-select");
-  r && (r.value = n), document.documentElement.setAttribute("data-theme", n), localStorage.setItem("theme", n);
-}, f = ({
+}, u = (n) => {
+  const t = document.getElementById("site-theme-select");
+  t && (t.value = n), document.documentElement.setAttribute("data-theme", n), localStorage.setItem("theme", n);
+}, g = ({
   searchLoading: n,
-  searchTerm: r,
-  results: t
+  searchTerm: t,
+  results: r
 }) => {
   if (n)
-    return /* @__PURE__ */ e(s, { children: [
+    return /* @__PURE__ */ e(m, { children: [
       "Searching for ",
-      /* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: t }),
       " ..."
     ] });
-  if (!t || t.length === 0)
-    return /* @__PURE__ */ e(s, { children: [
+  if (!r || r.length === 0)
+    return /* @__PURE__ */ e(m, { children: [
       "0 results for ",
-      /* @__PURE__ */ e("span", { className: "n-search-term", children: r })
+      /* @__PURE__ */ e("span", { className: "n-search-term", children: t })
     ] });
-  const c = h(() => t.map((l, i) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...l }) }, i)), [t]);
+  const c = o(() => r.map((i, l) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...i }) }, l)), [r]);
   return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: c });
 };
-function A({
-  setModalState: n,
-  searchLoading: r,
+function N({
+  searchLoading: n,
   searchTerm: t,
-  results: c,
-  children: l
+  results: r,
+  children: c
 }) {
-  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "n-search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(f, { searchLoading: r, searchTerm: t, results: c }) : l ? /* @__PURE__ */ e(d, { children: [
-    /* @__PURE__ */ e(
-      a,
-      {
-        as: "button",
-        icon: "askNetlify",
-        label: "Ask Netlify AI",
-        onClick: () => {
-          n({ current: "ask" });
-        }
-      }
-    ),
-    l,
-    /* @__PURE__ */ e(s, { children: "Actions" }),
+  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "n-search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(g, { searchLoading: n, searchTerm: t, results: r }) : c ? /* @__PURE__ */ e(h, { children: [
+    c,
+    /* @__PURE__ */ e(m, { children: "Actions" }),
     /* @__PURE__ */ e(
       a,
       {
@@ -56,13 +44,13 @@ function A({
         icon: "lightbulb",
         label: "Toggle theme",
         onClick: () => {
-          const i = window.matchMedia("(prefers-color-scheme: dark)").matches, m = document.documentElement.getAttribute("data-theme"), o = i ? "dark" : m || "light";
-          o && g(u[o]);
+          const i = window.matchMedia("(prefers-color-scheme: dark)").matches, l = document.documentElement.getAttribute("data-theme"), s = i ? "dark" : l || "light";
+          s && u(d[s]);
         }
       }
     )
   ] }) : null }) });
 }
 export {
-  A as default
+  N as default
 };

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

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

package/dist/utils/fetch-svg.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Fetches an SVG from a remote URL and strips any `fill` attributes
+ * to allow styling the SVG via CSS (e.g., using `currentColor` or masks).
+ *
+ * If the fetch fails or the response is not OK, logs the error and returns an empty string.
+ *
+ * @param {string} url - The URL of the SVG to fetch.
+ * @returns {Promise<string>} The cleaned SVG markup with `fill` attributes removed,
+ *                            or an empty string if the fetch fails.
+ */
+export declare function fetchSvg(url: string): Promise<string>;

package/dist/utils/kebab.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Converts a given string to kebab-case.
+ *
+ * - Converts camelCase to kebab-case.
+ * - Replaces spaces and underscores with dashes.
+ * - Removes all non-alphanumeric characters except dashes.
+ * - Converts the entire string to lowercase.
+ *
+ * @param {string} str - The input string to convert.
+ * @returns {string} The kebab-cased version of the input string.
+ *
+ * @example
+ * kebabCase('HelloWorld')         // 'hello-world'
+ * kebabCase('some_text Here')     // 'some-text-here'
+ * kebabCase('already-kebab-case') // 'already-kebab-case'
+ */
+export declare const kebabCase: (str: string) => string;

package/dist/utils/types.d.ts

@@ -12,3 +12,16 @@ export interface ImageProps {
     width: string;
     height: string;
 }
+export interface Testimonial {
+    quote?: string;
+    author?: string;
+    title?: string;
+    company?: string;
+    logoSrc?: string;
+    avatarSrc?: string;
+    cta?: {
+        id?: string;
+        url?: string;
+        label?: string;
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/Blockquote.astro

@@ -3,10 +3,20 @@ interface Props {
   quote?: string;
   author?: string;
   title?: string;
-  variant?: 'default' | 'simple';
+  avatarSrc?: string;
+  class?: string;
+  variant?: 'default' | 'simple' | 'testimonial';
 }
 
-const { quote, variant = 'default', author, title, class: className, ...rest } = Astro.props;
+const {
+  quote,
+  variant = 'default',
+  author,
+  title,
+  avatarSrc,
+  class: className,
+  ...rest
+} = Astro.props as Props;
 
 /**
  * If quote is added via <slot />, trim surrounding whitespace so that quotation marks properly wrap inline with the text string.
@@ -25,8 +35,11 @@ if (Astro.slots.has('default')) {
   {
     author || title ? (
       <figcaption>
-        {author && <span>{author}</span>}
-        {title && <span>{title}</span>}
+        {avatarSrc && <img src={avatarSrc} alt={`Avatar of ${author}`} />}
+        <div class="n-blockquote-author-info">
+          {author && <span class="n-blockquote-author">{author}</span>}
+          {title && <span class="n-blockquote-title">{title}</span>}
+        </div>
       </figcaption>
     ) : null
   }
@@ -60,13 +73,15 @@ if (Astro.slots.has('default')) {
 
   blockquote::before {
     content: open-quote;
+    color: var(--blockquote-accent-color);
   }
 
   blockquote::after {
     content: close-quote;
+    color: var(--blockquote-accent-color);
   }
 
-  figcaption {
+  .n-blockquote-author-info {
     display: flex;
     gap: 0.2em;
     font-size: var(--font-size-text-xs);
@@ -75,29 +90,67 @@ if (Astro.slots.has('default')) {
 
   /* Variants */
   [data-blockquote-variant='default'] {
-    figcaption {
+    .n-blockquote-author-info {
       flex-direction: column;
       font-weight: var(--font-weight-regular);
     }
 
-    figcaption > * {
+    .n-blockquote-author-info > * {
       display: block;
       font-family: var(--font-family-mono);
       text-transform: uppercase;
     }
 
-    figcaption > *:last-child:not(:only-child) {
+    .n-blockquote-author-info > *:last-child:not(:only-child) {
       color: var(--color-text-weak);
     }
   }
 
   [data-blockquote-variant='simple'] {
-    figcaption > * {
+    .n-blockquote-author-info > * {
       font-size: var(--font-size-text-sm);
     }
 
-    figcaption > *:not(:last-child)::after {
+    .n-blockquote-author-info > *:not(:last-child)::after {
       content: ',';
     }
   }
+
+  [data-blockquote-variant='testimonial'] {
+    border-inline-start: none;
+
+    font-size: var(--font-size-display-lg);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-heading);
+
+    .n-blockquote-author-info {
+      flex-direction: column;
+      font-weight: var(--font-weight-regular);
+      font-family: var(--font-family-mono);
+    }
+
+    figcaption {
+      display: flex;
+      align-items: center;
+      gap: var(--_gap);
+    }
+
+    figcaption img {
+      aspect-ratio: 1 / 1;
+      object-fit: cover;
+      width: 3.125rem;
+      height: auto;
+      clip-path: circle();
+    }
+
+    .n-blockquote-author-info {
+      font-size: var(--font-size-text-sm);
+      font-weight: var(--font-weight-regular);
+      text-transform: uppercase;
+    }
+
+    .n-blockquote-title {
+      color: var(--color-text-weak);
+    }
+  }
 </style>

package/packages/components/TestimonialSlider.astro

@@ -0,0 +1,110 @@
+---
+import { fetchSvg } from '../utils/fetch-svg.ts';
+import { kebabCase } from '../utils/kebab';
+import Blockquote from './Blockquote.astro';
+import Button from './Button.astro';
+import { Testimonial } from '../utils/types';
+
+import Tabs from '@netlify/spark-ui/components/Tabs.astro';
+import Tab from '@netlify/spark-ui/components/Tab.astro';
+import TabList from '@netlify/spark-ui/components/TabList.astro';
+import TabPanel from '@netlify/spark-ui/components/TabPanel.astro';
+
+interface Props {
+  items?: Testimonial[];
+}
+
+const { items } = Astro.props as Props;
+---
+
+<Tabs class="n-testimonial-slider">
+  <TabList class="n-testimonial-logos n-cluster">
+    {
+      items?.map(({ company, logoSrc }, index) => (
+        <Tab
+          class="n-logo-btn"
+          data-id={company && kebabCase(company)}
+          isSelected={index === 0}
+          aria-label={`Show testimonial from ${company}`}
+        >
+          {logoSrc && <slot set:html={fetchSvg(logoSrc)} />}
+        </Tab>
+      ))
+    }
+  </TabList>
+  {
+    items?.map((testimonial, index) => (
+      <TabPanel>
+        <div class="n-testimonial-quote-body n-flow">
+          <Blockquote
+            variant="testimonial"
+            aria-hidden={index !== 0}
+            class={`n-testimonial-quote n-fadeInUp ${index === 0 ? 'is-active' : ''}`}
+            quote={testimonial.quote}
+            author={testimonial.author}
+            title={testimonial.title}
+            avatarSrc={testimonial.avatarSrc}
+          />
+          {testimonial.cta && (
+            <Button
+              id={`cta-${testimonial.cta.id}`}
+              href={testimonial.cta.url}
+              class="n-testimonial-cta n-fadeIn"
+            >
+              {testimonial.cta.label}
+            </Button>
+          )}
+        </div>
+      </TabPanel>
+    ))
+  }
+</Tabs>
+
+<style>
+  @import url('../styles/animations.css');
+
+  .n-testimonial-slider {
+    --_spacing: var(--space-xl);
+  }
+
+  .n-testimonial-quote-body {
+    --n-flow-space: var(--_spacing);
+  }
+
+  .n-testimonial-logos {
+    --n-cluster-column-gap: var(--space-l);
+  }
+
+  [role='tablist'] {
+    margin-block-end: var(--_spacing);
+  }
+
+  .n-testimonial-cta {
+    width: fit-content;
+    animation-delay: 200ms;
+  }
+
+  .n-logo-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    place-items: center;
+    outline-offset: 0.5rem;
+  }
+
+  .n-logo-btn :global(svg) {
+    width: 6.25rem;
+    height: auto;
+    fill: var(--testimonial-logo-inactive-color);
+    transition: fill 300ms ease-out;
+  }
+
+  .n-logo-btn:hover :global(svg) {
+    fill: var(--testimonial-logo-hover-color);
+  }
+
+  .n-logo-btn[aria-selected='true'] :global(svg) {
+    fill: var(--blockquote-accent-color);
+  }
+</style>