@netlify/spark-ui 0.0.33 → 0.0.35

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

@@ -1,106 +1,62 @@
-import { u as n } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as O, y as v, d as N } from "../../../../../chunks/hooks.module.BFfOesdf.js";
+import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { A as N, y as u, d as v } from "../../../../../chunks/hooks.module.BFfOesdf.js";
 import T from "../../../Modal/Modal.js";
-import p from "../../../KeyboardKey/KeyboardKey.js";
-import b from "../SearchWindow.js";
-import I from "../SearchInput.js";
-import { useSearch as L } from "../../hooks/useSearch.js";
-import { useKeyboardNav as P } from "../../hooks/useKeyboardNav.js";
-import { useSearchHotkeys as E } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as j } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as k } from "../../hooks/useSearchToggles.js";
-import '../../../../../assets/SearchModal.css';function x(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
-}
-var h = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-var w;
-function C() {
-  return w || (w = 1, function(t) {
-    (function() {
-      var s = {}.hasOwnProperty;
-      function o() {
-        for (var e = "", r = 0; r < arguments.length; r++) {
-          var a = arguments[r];
-          a && (e = l(e, c(a)));
-        }
-        return e;
-      }
-      function c(e) {
-        if (typeof e == "string" || typeof e == "number")
-          return e;
-        if (typeof e != "object")
-          return "";
-        if (Array.isArray(e))
-          return o.apply(null, e);
-        if (e.toString !== Object.prototype.toString && !e.toString.toString().includes("[native code]"))
-          return e.toString();
-        var r = "";
-        for (var a in e)
-          s.call(e, a) && e[a] && (r = l(r, a));
-        return r;
-      }
-      function l(e, r) {
-        return r ? e ? e + " " + r : e + r : e;
-      }
-      t.exports ? (o.default = o, t.exports = o) : window.classNames = o;
-    })();
-  }(h)), h.exports;
-}
-var M = C();
-const A = /* @__PURE__ */ x(M);
-function K(t) {
-  const s = O(null);
-  return v(() => {
-    function o(c) {
-      s.current && !s.current.contains(c.target) && t();
+import d from "../../../KeyboardKey/KeyboardKey.js";
+import k from "../SearchWindow.js";
+import w from "../SearchInput.js";
+import { useSearch as I } from "../../hooks/useSearch.js";
+import { useKeyboardNav as L } from "../../hooks/useKeyboardNav.js";
+import { useSearchHotkeys as O } from "../../hooks/useSearchHotkeys.js";
+import { useSearchParams as P } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as E } from "../../hooks/useSearchToggles.js";
+import '../../../../../assets/SearchModal.css';function K(s) {
+  const r = N(null);
+  return u(() => {
+    function t(i) {
+      r.current && !r.current.contains(i.target) && s();
     }
-    return document.addEventListener("mousedown", o), () => {
-      document.removeEventListener("mousedown", o);
+    return document.addEventListener("mousedown", t), () => {
+      document.removeEventListener("mousedown", t);
     };
-  }, [t]), s;
+  }, [s]), r;
 }
-function J(t = { className: "", children: null }) {
-  const [s, o] = N(!1);
-  v(() => {
-    let f;
-    const y = () => {
-      window.pagefind && (o(!0), f && clearInterval(f));
+function j(s = { className: "", children: null }) {
+  const [r, t] = v(!1);
+  u(() => {
+    let c;
+    const S = () => {
+      window.pagefind && (t(!0), c && clearInterval(c));
     };
-    return y(), f = setInterval(y, 100), () => clearInterval(f);
+    return S(), c = setInterval(S, 100), () => clearInterval(c);
   }, []);
-  const { children: c, className: l, ...e } = t, { state: r, actions: a } = L(), [u, S] = N(!1), m = () => S(!0), d = () => S(!1), i = O(null), g = K(d);
-  return k(s, m), j(s, a.setSearchTerm, m), E(s, u, m, d), P(s, i, u, d), v(() => {
-    i.current && (u ? i.current.showModal() : i.current.close());
-  }, [u]), /* @__PURE__ */ n(T, { ref: i, className: A(l, "n-search-modal"), ...e, children: /* @__PURE__ */ n("div", { ref: g, className: "n-search-container", children: [
-    /* @__PURE__ */ n(I, { setSearchTerm: a.setSearchTerm, initialValue: r.searchTerm }),
-    /* @__PURE__ */ n(
-      b,
+  const { children: i, className: f, ...g } = s, { state: n, actions: h } = I(), [o, p] = v(!1), l = () => p(!0), m = () => p(!1), a = N(null), y = K(m);
+  return E(r, l), P(r, h.setSearchTerm, l), O(r, o, l, m), L(r, a, o, m), u(() => {
+    a.current && (o ? a.current.showModal() : a.current.close());
+  }, [o]), /* @__PURE__ */ e(T, { ref: a, className: `n-search-modal ${f || ""}`, ...g, children: /* @__PURE__ */ e("div", { ref: y, className: "n-search-container", children: [
+    /* @__PURE__ */ e(w, { setSearchTerm: h.setSearchTerm, initialValue: n.searchTerm }),
+    /* @__PURE__ */ e(
+      k,
       {
-        searchLoading: r.isLoading,
-        searchTerm: r.searchTerm,
-        results: r.results,
-        children: c
+        searchLoading: n.isLoading,
+        searchTerm: n.searchTerm,
+        results: n.results,
+        children: i
       }
     ),
-    /* @__PURE__ */ n("div", { className: "n-search-footer", children: [
-      /* @__PURE__ */ n("p", { className: "n-search-footer-tip", children: [
-        /* @__PURE__ */ n(p, { keyNames: ["Esc"] }),
+    /* @__PURE__ */ e("div", { className: "n-search-footer", children: [
+      /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
+        /* @__PURE__ */ e(d, { keyNames: ["Esc"] }),
         "to close"
       ] }),
-      /* @__PURE__ */ n("p", { className: "n-search-footer-tip", children: [
-        /* @__PURE__ */ n(p, { keyNames: ["Tab"] }),
-        /* @__PURE__ */ n("span", { children: "or" }),
-        /* @__PURE__ */ n(p, { keyNames: ["↑", "↓"] }),
+      /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
+        /* @__PURE__ */ e(d, { keyNames: ["Tab"] }),
+        /* @__PURE__ */ e("span", { children: "or" }),
+        /* @__PURE__ */ e(d, { keyNames: ["↑", "↓"] }),
         "to navigate"
       ] })
     ] })
   ] }) });
 }
 export {
-  J as default
+  j as default
 };

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

@@ -1,8 +1,8 @@
-import { A as u, y as p, d as S } from "../../../../chunks/hooks.module.BFfOesdf.js";
-import { getSiteIcon as w } from "../utils/index.js";
-function T(s, r) {
+import { A as u, y as w, d as T } from "../../../../chunks/hooks.module.BFfOesdf.js";
+import { getSiteIcon as L } from "../utils/index.js";
+function b(s, r) {
   const t = u(null), c = u("");
-  return p(() => () => {
+  return w(() => () => {
     t.current && clearTimeout(t.current);
   }, []), { reset: () => {
     t.current && clearTimeout(t.current);
@@ -13,12 +13,12 @@ function T(s, r) {
     );
   } };
 }
-function x() {
-  const [s, r] = S({
+function _() {
+  const [s, r] = T({
     searchTerm: "",
     results: [],
     isLoading: !1
-  }), t = u(/* @__PURE__ */ new Map()), { reset: c, run: l } = T((e) => {
+  }), t = u(/* @__PURE__ */ new Map()), { reset: c, run: l } = b((e) => {
     (e.length > 2 || e.length === 0) && o(e);
   }, 150), o = async (e) => {
     if (!(window != null && window.pagefind)) return;
@@ -30,22 +30,22 @@ function x() {
       }));
       return;
     }
-    const i = await window.pagefind.debouncedSearch(e), g = await Promise.all(
+    const i = await window.pagefind.debouncedSearch(e), p = await Promise.all(
       i.results.slice(0, 15).map(async (n) => {
         var m, f, d;
-        const a = await n.data();
+        const a = await n.data(), g = (S) => S.replace("#", "");
         return {
-          icon: w((m = a.meta) == null ? void 0 : m.content_type),
+          icon: L((m = a.meta) == null ? void 0 : m.content_type),
           content_type: (f = a.meta) == null ? void 0 : f.content_type,
           label: (d = a.meta) == null ? void 0 : d.title,
           url: a.url,
-          excerpt: a.excerpt
+          excerpt: g(a.excerpt)
         };
       })
     );
     r((n) => ({
       ...n,
-      results: g,
+      results: p,
       isLoading: !1
     }));
   };
@@ -60,5 +60,5 @@ function x() {
   };
 }
 export {
-  x as useSearch
+  _ as useSearch
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -32,7 +32,6 @@
   },
   "dependencies": {
     "@preact/preset-vite": "^2.10.1",
-    "classnames": "^2.5.1",
     "glob": "^11.0.1",
     "preact": "^10.26.4",
     "vite": "^6.2.5",
@@ -54,8 +53,7 @@
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-astro": "^1.3.1",
     "preact": "^10.26.4",
-    "classnames": "^2.5.1",
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
   }
-}
+}

package/packages/components/Tabs.astro

@@ -7,14 +7,14 @@ interface Props {
 const { id, class: className, ...rest } = Astro.props;
 ---
 
-<x-tabs id={id} class={className} {...rest}>
+<n-tabs id={id} class={className} {...rest}>
   <slot />
-</x-tabs>
+</n-tabs>
 
 <script>
   /**
    * Slightly altered version of another tabs component
-   * Adds "tabs-change" event that includes selected tab info
+   * Adds "tabs-change" event that returns selected tab info
    * {@link https://www.mayank.co/blog/tabs}
    */
   class Tabs extends HTMLElement {
@@ -102,5 +102,5 @@ const { id, class: className, ...rest } = Astro.props;
     }
   }
 
-  customElements.define('x-tabs', Tabs);
+  customElements.define('n-tabs', Tabs);
 </script>

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

@@ -1,6 +1,5 @@
 import { type ComponentChildren } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
-import cn from "classnames"
 
 import Modal from '../../../../preact/Modal/Modal';
 import KeyboardKey from '../../../../preact/KeyboardKey/KeyboardKey';
@@ -66,7 +65,7 @@ function SearchModal(props: Props = {className: '', children: null}) {
   }, [searchOpen]);
 
   return (
-    <Modal ref={modalRef} className={cn(className, 'n-search-modal')} {...rest}>
+    <Modal ref={modalRef} className={`n-search-modal ${className ? className : ''}`} {...rest}>
       <div ref={containerRef} className="n-search-container">
           <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
 

package/packages/components/preact/SearchModal/hooks/useSearch.ts

@@ -44,12 +44,14 @@ export function useSearch() {
     const results = await Promise.all(
       search.results.slice(0, 15).map(async (result: any) => {
         const data = await result.data();
+        const removeAnchorLink = (text: string) => text.replace("#", '')
+
         return {
           icon: getSiteIcon(data.meta?.content_type),
           content_type: data.meta?.content_type,
           label: data.meta?.title,
           url: data.url,
-          excerpt: data.excerpt,
+          excerpt: removeAnchorLink(data.excerpt),
         };
       })
     );

package/packages/styles/buttons.css

@@ -16,20 +16,25 @@ button,
   border: 1px solid var(--color-border);
   border-radius: var(--radius-m);
 
-  /* Button press */
-  &:active:not(:disabled) {
-    top: 1px;
-  }
-
   /* Button icons */
   svg {
     flex: none;
     height: var(--button-icon-size, 1.2cap);
     width: auto;
   }
-}
 
-:where(button, .button) {
+  /* Button states */
+  &:active:not(:disabled) {
+    top: 1px;
+  }
+
+  &:disabled {
+    color: var(--color-disabled-bg);
+    background-color: var(--color-disabled-bg);
+    border-color: var(--color-disabled-bg);
+  }
+
+  /* Button variants */
   &[data-button-variant='primary'] {
     color: var(--color-text-inverse);
     background-color: var(--color-brand);
@@ -40,4 +45,16 @@ button,
     background-color: var(--color-brand-alt);
     border-color: var(--color-brand-alt);
   }
+
+  &[data-button-variant='text'] {
+    color: currentColor;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  &[data-button-variant='ghost'] {
+    color: currentColor;
+    background-color: transparent;
+    border-color: currentColor;
+  }
 }

package/packages/styles/tabs.css

@@ -1,16 +1,26 @@
-[role='tablist'] {
+.tabs [role='tablist'] {
   display: flex;
-  gap: 2rem;
+  isolation: isolate;
+  border: var(--_border);
 }
 
-[role='tab'] {
-  border-bottom: 2px solid transparent;
+.tabs [role='tab'] {
+  position: relative;
+  border-color: transparent;
 
-  &[aria-selected='true'] {
-    border-color: var(--color-border);
+  /* Remove button push/click style */
+  &:active:not(:disabled) {
+    top: unset;
   }
 }
 
-[role='tabpanel'] {
-  margin-block-start: 1rem;
+.tabs [role='tab'][aria-selected='true'] {
+  /* Bring selected tab to layer above others to avoid clipping outline styles */
+  z-index: 1;
+}
+
+.tabs [role='tabpanel'] {
+  border: var(--_border);
+  border-block-start: unset;
+  padding: var(--_padding);
 }

package/packages/styles/tokens.css

@@ -16,6 +16,7 @@
   --color-bg-1: var(--neutral-000);
   --color-bg-2: var(--neutral-100);
   --color-bg-3: var(--neutral-200);
+  --color-border: var(--neutral-200);
   --color-brand: var(--blue-700);
   --color-disabled-bg: var(--neutral-200);
   --color-disabled-border: var(--neutral-400);
@@ -146,6 +147,7 @@
     --color-bg-1: var(--neutral-000);
     --color-bg-2: var(--neutral-100);
     --color-bg-3: var(--neutral-200);
+    --color-border: var(--neutral-200);
     --color-brand: var(--blue-700);
     --color-disabled-bg: var(--neutral-200);
     --color-disabled-border: var(--neutral-400);
@@ -180,6 +182,7 @@
   --color-bg-1: var(--neutral-000);
   --color-bg-2: var(--neutral-100);
   --color-bg-3: var(--neutral-200);
+  --color-border: var(--neutral-200);
   --color-brand: var(--blue-700);
   --color-disabled-bg: var(--neutral-200);
   --color-disabled-border: var(--neutral-400);
@@ -214,6 +217,7 @@
     --color-bg-1: var(--neutral-800);
     --color-bg-2: var(--neutral-700);
     --color-bg-3: var(--neutral-600);
+    --color-border: var(--neutral-200);
     --color-brand: var(--teal-200);
     --color-disabled-bg: var(--neutral-600);
     --color-disabled-border: var(--neutral-400);
@@ -248,6 +252,7 @@
   --color-bg-1: var(--neutral-800);
   --color-bg-2: var(--neutral-700);
   --color-bg-3: var(--neutral-600);
+  --color-border: var(--neutral-200);
   --color-brand: var(--teal-200);
   --color-disabled-bg: var(--neutral-600);
   --color-disabled-border: var(--neutral-400);