@netlify/spark-ui 1.5.0 → 1.8.0

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.5.0",
+  "version": "1.8.0",
   "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/Switchback.astro

@@ -0,0 +1,129 @@
+---
+import { CallToActionProps } from '@utils/types';
+import Eyebrow from './Eyebrow.astro';
+import ActionLink from './ActionLink.astro';
+
+interface Props {
+  id?: string;
+  class?: string;
+  isReversed?: boolean;
+  eyebrow?: string;
+  heading?: string;
+  text?: string;
+  list?: string[];
+  cta?: CallToActionProps;
+  mediaPattern?: 1 | 2;
+}
+
+const {
+  eyebrow,
+  heading,
+  text,
+  list,
+  cta,
+  isReversed,
+  mediaPattern = 1,
+  id,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  id={id}
+  class:list={['n-switchback n-sidebar-left', isReversed && 'n-switchback-reversed', className]}
+  data-theme="dark"
+  {...rest}
+>
+  <div class="n-switchback-content n-flow">
+    {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
+    {heading && <h3 class="n-switchback-heading h5">{heading}</h3>}
+    {text && <p class="text" set:html={text} />}
+    {
+      list && list.length > 0 && (
+        <ul data-list-variant="contained">
+          {list.map((item: string) => (
+            <li>{item}</li>
+          ))}
+        </ul>
+      )
+    }
+    {
+      cta && (
+        <div class="n-switchback-cta">
+          <ActionLink id={cta.id} href={cta.href}>
+            {cta.text}
+          </ActionLink>
+        </div>
+      )
+    }
+  </div>
+  {
+    Astro.slots.has('media') && (
+      <div class="n-switchback-media" data-switchback-media-pattern={mediaPattern}>
+        <slot name="media" />
+      </div>
+    )
+  }
+</div>
+
+<style>
+  .n-switchback {
+    --n-sidebar-size: 25rem;
+    --n-sidebar-min: 50%;
+    --n-sidebar-gap: 0;
+    overflow: hidden;
+    color: var(--color-text);
+    background: linear-gradient(
+      var(--n-switchback-gradient-angle, 101deg),
+      #0d1818 8.17%,
+      #0c2a2a 56.72%
+    );
+    border: 1px solid rgba(208, 255, 254, 0.2);
+    border-radius: var(--radius-m);
+  }
+
+  .n-switchback-reversed {
+    --n-switchback-gradient-angle: 248deg;
+    flex-direction: row-reverse;
+  }
+
+  .n-switchback-content {
+    padding: var(--space-l);
+  }
+
+  .n-switchback-heading {
+    color: var(--heading-text-color);
+  }
+
+  .n-switchback-media {
+    display: grid;
+    place-items: center;
+    padding: var(--space-xl);
+    background: var(--red-400);
+    min-height: 10rem;
+
+    :is(img, picture) {
+      max-width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+  }
+
+  /** Patterns */
+  [data-switchback-media-pattern='1'] {
+    background:
+      url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzY5IiBoZWlnaHQ9IjQ5MCIgdmlld0JveD0iMCAwIDc2OSA0OTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjM4NC4zMjQiIHk9IjEwLjc1NDciIHdpZHRoPSIzMzEuMTY0IiBoZWlnaHQ9IjMzMS4xNjQiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDM4NC4zMjQgMTAuNzU0NykiIHN0cm9rZT0id2hpdGUiLz4KPHJlY3QgeD0iNjIxLjMyNCIgeT0iNy45MjI4NSIgd2lkdGg9IjQ3NCIgaGVpZ2h0PSI0NzQiIHRyYW5zZm9ybT0icm90YXRlKDkwIDYyMS4zMjQgNy45MjI4NSkiIHN0cm9rZT0id2hpdGUiLz4KPHJlY3QgeD0iODU5LjEwMSIgeT0iMjQ0LjkyMyIgd2lkdGg9IjY3MS40MzYiIGhlaWdodD0iNjcxLjQzNiIgdHJhbnNmb3JtPSJyb3RhdGUoMTM1IDg1OS4xMDEgMjQ0LjkyMykiIHN0cm9rZT0id2hpdGUiLz4KPHJlY3QgeD0iNTAxLjUwNCIgeT0iMTI3Ljc0MyIgd2lkdGg9IjIzNC4zNTkiIGhlaWdodD0iMjM0LjM1OSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgNTAxLjUwNCAxMjcuNzQzKSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8cmVjdCB4PSI1MDEuMjk3IiB5PSIyNDQuOTIzIiB3aWR0aD0iMTY1LjQyMyIgaGVpZ2h0PSIxNjUuNDIzIiB0cmFuc2Zvcm09InJvdGF0ZSgxMzUgNTAxLjI5NyAyNDQuOTIzKSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8cmVjdCB4PSI0NDMuNTA0IiB5PSIzMDQuMTAzIiB3aWR0aD0iMTE4LjM2MSIgaGVpZ2h0PSIxMTguMzYxIiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDQ0My41MDQgMzA0LjEwMykiIHN0cm9rZT0id2hpdGUiLz4KPC9zdmc+Cg=='),
+      radial-gradient(circle at 50% 70%, var(--red-500) 0%, var(--purple-300) 100%);
+    background-size: cover;
+    background-position: center;
+  }
+
+  [data-switchback-media-pattern='2'] {
+    background:
+      repeating-linear-gradient(-30deg, var(--red-000) 0 1px, transparent 1px 150px),
+      radial-gradient(circle at 10% 70%, var(--blue-500) 0%, var(--teal-200) 100%);
+    background-size: cover;
+    background-position: center;
+  }
+</style>

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>