@netlify/spark-ui 1.6.0 → 1.8.1

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

@@ -1,48 +1,68 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { T as o } from "../../../../chunks/hooks.module.D9IrxdEh.js";
-import t from "./SearchHeading/SearchHeading.js";
+import { T as h } from "../../../../chunks/hooks.module.D9IrxdEh.js";
+import s from "./SearchHeading/SearchHeading.js";
 import a from "./SearchLink/SearchLink.js";
-const h = ({
-  searchLoading: s,
+import { Fragment as d } from "preact";
+const u = {
+  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 = ({
+  searchLoading: n,
   searchTerm: r,
-  results: n
+  results: t
 }) => {
-  if (s)
-    return /* @__PURE__ */ e(t, { children: [
+  if (n)
+    return /* @__PURE__ */ e(s, { children: [
       "Searching for ",
       /* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
       " ..."
     ] });
-  if (!n || n.length === 0)
-    return /* @__PURE__ */ e(t, { children: [
+  if (!t || t.length === 0)
+    return /* @__PURE__ */ e(s, { children: [
       "0 results for ",
       /* @__PURE__ */ e("span", { className: "n-search-term", children: r })
     ] });
-  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 });
+  const c = h(() => t.map((l, i) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...l }) }, i)), [t]);
+  return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: c });
 };
-function p({
-  searchLoading: s,
-  searchTerm: r,
-  results: n,
+function A({
+  setModalState: n,
+  searchLoading: r,
+  searchTerm: t,
+  results: c,
   children: l
 }) {
-  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,
+  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" }),
+    /* @__PURE__ */ e(
+      a,
       {
-        searchLoading: s,
-        searchTerm: r,
-        results: n
+        as: "button",
+        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]);
+        }
       }
-    ) : l || null
-  ] }) });
+    )
+  ] }) : null }) });
 }
 export {
-  p as default
+  A as default
 };

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

@@ -1,6 +1,6 @@
-import { y as l } from "../../../../chunks/hooks.module.D9IrxdEh.js";
-function s(r, t, o, c) {
-  l(() => {
+import { y as f } from "../../../../chunks/hooks.module.D9IrxdEh.js";
+function k(r, t, o, c) {
+  f(() => {
     if (!r) return;
     const u = (e) => {
       if (o) {
@@ -12,8 +12,8 @@ function s(r, t, o, c) {
           e.preventDefault();
           const d = t.current;
           if (!d) return;
-          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();
+          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();
         }
       }
     };
@@ -21,5 +21,5 @@ function s(r, t, o, c) {
   }, [r, t, o, c]);
 }
 export {
-  s as useKeyboardNav
+  k as useKeyboardNav
 };

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

@@ -9,4 +9,6 @@
  *
  * @param onOpen - A function to be called when a toggle element is clicked.
  */
-export declare function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void): void;
+export declare function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void, setState: (state: {
+    current: string;
+}) => void): void;

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

@@ -1,16 +1,19 @@
-import { y as l } from "../../../../chunks/hooks.module.D9IrxdEh.js";
-function i(c, r) {
-  l(() => {
+import { y as a } from "../../../../chunks/hooks.module.D9IrxdEh.js";
+function s(c, t, l) {
+  a(() => {
     if (!c) return;
-    const t = document.querySelectorAll("[data-ntl-search-toggle]");
-    if (t.length)
-      return t.forEach((e) => {
-        e.removeAttribute("disabled"), e.addEventListener("click", r);
+    const r = document.querySelectorAll("[data-ntl-search-toggle]");
+    if (r.length)
+      return r.forEach((e) => {
+        const o = e.dataset.ntlSearchToggle ? e.dataset.ntlSearchToggle : "search";
+        e.removeAttribute("disabled"), e.addEventListener("click", () => {
+          t(), l({ current: o });
+        });
       }), () => {
-        t.forEach((e) => e.removeEventListener("click", r));
+        r.forEach((e) => e.removeEventListener("click", t));
       };
-  }, [c, r]);
+  }, [c, t]);
 }
 export {
-  i as useSearchToggles
+  s as useSearchToggles
 };

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

@@ -1,13 +1,18 @@
 import { ComponentChildren } from 'preact';
 import { IconName } from '../../Icon';
 export interface SearchLinkProps {
+    as?: any;
     icon: IconName;
     label: string;
     resource?: 'blog' | 'changelog' | 'docs' | 'guide';
-    url: string;
+    url?: string;
     excerpt?: string;
+    onClick?: () => void;
 }
 export interface SearchWindowProps {
+    setModalState: (e: {
+        current: string;
+    }) => void;
     searchLoading: boolean;
     searchTerm?: string;
     results?: SearchLinkProps[];

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

@@ -0,0 +1,7 @@
+interface IconProps {
+    name: string;
+    size?: number;
+    className?: string;
+}
+export declare function SpriteIcon({ name, size, className }: IconProps): import("preact").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { u as e } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+function c({ name: i, size: n = 24, className: r = "" }) {
+  return /* @__PURE__ */ e("svg", { className: `icon-${i} ${r || ""}`, "aria-hidden": "true", children: /* @__PURE__ */ e("use", { href: `/icons.svg#icon-${i}` }) });
+}
+export {
+  c as SpriteIcon
+};

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

@@ -4,5 +4,6 @@ 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,16 +3,18 @@ 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 h } from "./SearchModal/components/SearchToggle/SearchToggle.js";
+import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
+import { default as S } from "./AskNetlify/AskNetlify.js";
 import "preact";
 import "../../chunks/hooks.module.D9IrxdEh.js";
-import { default as S } from "./SearchModal/components/SearchModal/SearchModal.js";
+import { default as n } 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,
-  S as SearchModal,
-  h as SearchToggle
+  n as SearchModal,
+  i as SearchToggle
 };

package/dist/utils/theme.d.ts

@@ -0,0 +1,3 @@
+export type Theme = 'light' | 'dark';
+export declare const ThemeMap: Record<Theme, Theme>;
+export declare const handleThemeChange: (value: Theme) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.6.0",
+  "version": "1.8.1",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -25,6 +25,7 @@
   "exports": {
     "./preact": "./dist/components/preact/index.js",
     "./assets/*.css": "./dist/assets/*.css",
+    "./assets/icons/*.svg": "./packages/assets/icons/*.svg",
     "./logos/*.svg": "./packages/assets/logos/*.svg",
     "./styles/*.css": "./packages/styles/*.css",
     "./assets/*": "./packages/assets/*",
@@ -34,9 +35,11 @@
     "./analytics": "./packages/analytics/index.ts"
   },
   "dependencies": {
+    "@kapaai/react-sdk": "^0.1.3",
     "@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",

package/packages/components/Ticker.astro

@@ -1,5 +1,6 @@
 ---
 interface Props {
+  as?: HTMLElement;
   id?: string;
   class?: string;
   gap?: string;
@@ -10,39 +11,49 @@ interface Props {
 }
 
 const {
+  as = 'div',
   id,
   class: className,
   gap,
   pauseOnHover,
   reverse,
   scrollY,
-  speed = 30,
+  speed = 50,
   ...rest
 } = Astro.props;
 
-const css = {
-  'n-ticker-animation': scrollY ? 'scroll-y' : 'scroll-x',
-  'n-ticker-direction': scrollY ? 'column' : 'row',
-  'n-ticker-duration': speed + 's',
-  'n-ticker-gap': gap || undefined,
-  'n-ticker-hover-play-state': pauseOnHover ? 'paused' : 'running',
-  'n-ticker-mask-direction': scrollY ? 'to bottom' : 'to right',
+const customStyles = {
+  ...(gap && { '--n-ticker-gap': gap }),
+  ...(pauseOnHover && { '--n-ticker-hover-play-state': 'paused' }),
+  ...(speed && { '--n-ticker-duration': speed + 's' }),
+  ...(scrollY && {
+    '--n-ticker-animation': 'scroll-y',
+    '--n-ticker-direction': 'column',
+    '--n-ticker-mask-direction': 'to bottom',
+  }),
 };
+
+const Element = as;
 ---
 
-<div id={id} class:list={['ticker', reverse && 'ticker-reverse', className]} {...rest}>
+<Element
+  id={id}
+  class:list={['n-ticker', reverse && 'n-ticker-reverse', className]}
+  style={customStyles}
+  {...rest}
+>
   {
     Array.from({ length: 2 }, (_, index) => (
-      <div class="ticker-content" aria-hidden={index !== 0 ? 'true' : undefined}>
+      <div class="n-ticker-content" aria-hidden={index !== 0 ? 'true' : undefined}>
         <slot />
       </div>
     ))
   }
-</div>
+</Element>
 
-<style define:vars={css}>
-  .ticker {
-    --_gap: var(--n-ticker-gap, 1rem);
+<style>
+  .n-ticker {
+    --_gap: var(--n-ticker-gap, var(--space-s));
     display: flex;
     flex-direction: var(--n-ticker-direction, row);
     overflow: hidden;
@@ -60,7 +71,7 @@ const css = {
     );
   }
 
-  .ticker-content {
+  .n-ticker-content {
     flex-shrink: 0;
     display: flex;
     flex-direction: var(--n-ticker-direction, row);
@@ -70,7 +81,7 @@ const css = {
   }
 
   /** Animation */
-  .ticker-content {
+  .n-ticker-content {
     animation-name: var(--n-ticker-animation, scroll-x);
     animation-duration: var(--n-ticker-duration, 30s);
     animation-play-state: var(--n-ticker-play-state, running);
@@ -78,11 +89,11 @@ const css = {
     animation-iteration-count: infinite;
   }
 
-  .ticker:hover .ticker-content {
+  .n-ticker:hover .n-ticker-content {
     animation-play-state: var(--n-ticker-hover-play-state, running);
   }
 
-  .ticker-reverse .ticker-content {
+  .n-ticker-reverse .n-ticker-content {
     animation-direction: reverse;
   }
 

package/packages/components/TrustBarTicker.astro

@@ -0,0 +1,26 @@
+---
+import Ticker from './Ticker.astro';
+
+interface Props {
+  as?: HTMLElement;
+  id?: string;
+  class?: string;
+  pauseOnHover?: boolean;
+  reverse?: boolean;
+}
+
+const { as, pauseOnHover, reverse, id, class: className, ...rest } = Astro.props;
+---
+
+<Ticker
+  as={as}
+  id={id}
+  gap="var(--space-2xl)"
+  pauseOnHover={pauseOnHover}
+  reverse={reverse}
+  speed={50}
+  class={className}
+  {...rest}
+>
+  <slot />
+</Ticker>

package/packages/components/TrustBarTickerItem.astro

@@ -0,0 +1,54 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+  as?: HTMLElement;
+  id?: string;
+  iconSrc?: string;
+  text?: string;
+  class?: string;
+}
+
+const { as = 'div', id, iconSrc, text, class: className, ...rest } = Astro.props;
+
+const Element = as;
+---
+
+<Element {id} class:list={['n-trust-bar-ticker-item', className]} {...rest}>
+  {
+    iconSrc && (
+      <div class="n-trust-bar-ticker-item-icon">
+        <Image src={iconSrc} alt="" width="30" height="30" />
+      </div>
+    )
+  }
+  <div class="n-trust-bar-ticker-item-content">
+    {text ? text : <slot />}
+  </div>
+</Element>
+
+<style>
+  .n-trust-bar-ticker-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+  }
+
+  .n-trust-bar-ticker-item-icon {
+    flex-shrink: 0;
+    aspect-ratio: 1;
+    padding: var(--space-3xs);
+    inline-size: 2.5rem;
+    border-radius: 50%;
+    border: 1px solid var(--color-stroke);
+    background: var(--code-bg-color);
+  }
+
+  .n-trust-bar-ticker-item-content :global(:where(img, picture, svg)) {
+    width: 100%;
+    height: auto;
+    max-height: 4rem;
+    object-fit: contain;
+    filter: var(--filter-invert);
+  }
+</style>