@netlify/spark-ui 0.0.12 → 0.0.14

package/packages/components/preact/KeyboardKey/KeyboardKey.css

@@ -1,17 +1,15 @@
-:root {
-  --ntl-key-text-size: .8em;
-  --ntl-key-border-radius: 6px;
-  --ntl-key-text-color: var(--neutral-300);
-  --ntl-key-bg-color: transparent;
-}
+.n-keyboard-key {
+  --n-key-text-size: .8em;
+  --n-key-border-radius: 6px;
+  --n-key-text-color: currentColor;
+  --n-key-bg-color: transparent;
 
-.keyboard-key {
   display: flex;
   gap: calc(var(--space-3xs) * .5);
-  font-size: var(--ntl-key-text-size);
-  color: var(--ntl-key-text-color);
-  background: var(--ntl-key-bg-color);
+  font-size: var(--n-key-text-size);
+  color: var(--n-key-text-color);
+  background: var(--n-key-bg-color);
   border: 1px solid currentColor;
-  border-radius: var(--ntl-key-border-radius);
-  padding: var(--ntl-key-padding-block, .05em) var(--ntl-key-padding-inline, .3em);
+  border-radius: var(--n-key-border-radius);
+  padding: var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em);
 }

package/packages/components/preact/KeyboardKey/{index.tsx → KeyboardKey.tsx}

@@ -1,5 +1,3 @@
-import { h } from 'preact';
-
 import './KeyboardKey.css';
 
 interface Props {
@@ -8,7 +6,7 @@ interface Props {
 
 function KeyboardKey(props: Props) {
   return (
-    <span class="keyboard-key">
+    <span class="n-keyboard-key">
       {props.keyNames.map((keyName, idx) => (
         <span key={idx}>{keyName}</span>
       ))}

package/packages/components/preact/Modal/{index.tsx → Modal.tsx}

@@ -1,4 +1,4 @@
-import { h, ComponentChildren, Ref } from 'preact';
+import { ComponentChildren, Ref } from 'preact';
 import { forwardRef } from 'preact/compat';
 
 interface Props {

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

@@ -0,0 +1,7 @@
+.n-search-heading {
+  padding-inline: 1rem;
+  margin-block: var(--space-xs);
+  font-size: var(--step--2);
+  font-weight: var(--font-regular);
+  color: var(--color-text-3);
+}

package/packages/components/preact/SearchModal/components/{SearchHeading.tsx → SearchHeading/SearchHeading.tsx}

@@ -1,11 +1,13 @@
-import { h, type ComponentChildren } from 'preact';
+import { type ComponentChildren } from 'preact';
+
+import './SearchHeading.css';
 
 type SearchHeadingProps = {
   children: ComponentChildren;
 };
 
 const SearchHeading = ({ children }: SearchHeadingProps) => {
-  return <h2 class="search-results-heading">{children}</h2>;
+  return <h2 class="n-search-heading">{children}</h2>;
 };
 
 export default SearchHeading;

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

@@ -1,8 +1,7 @@
-import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import Icon from '../../Icon';
 
-interface Props extends h.JSX.HTMLAttributes<HTMLInputElement> {
+interface Props {
   setSearchTerm: (term: string) => void;
   placeholder?: string;
   initialValue?: string;
@@ -24,15 +23,15 @@ const SearchInput = (props: Props) => {
   }, [props.initialValue, setValue]);
 
   return (
-    <div class="search-input-wrapper">
-      <label class="search-label" htmlFor="search">
+    <div class="n-search-input-wrapper">
+      <label class="n-search-label" htmlFor="search">
         <span class="visually-hidden">Search</span>
-        <div class="search-icon">
+        <div class="n-search-icon">
           <Icon name="search" />
         </div>
       </label>
       <input
-        class="search-input"
+        class="n-search-input"
         type="text"
         value={value}
         placeholder={props.placeholder || 'Search...'}

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

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import Icon, { type IconName } from '../../Icon';
 
 export interface Props {
@@ -9,11 +8,11 @@ export interface Props {
   excerpt?: string;
 }
 
-const SearchLink = ({ icon, title, content_type, url, excerpt }: Props) => {
+const SearchLink = ({ icon, title, url, excerpt }: Props) => {
   return (
-    <a className="result-link" href={url}>
-      <div className="result-header">
-        <div className="result-title">
+    <a className="n-result-link" href={url}>
+      <div className="n-result-header">
+        <div className="n-result-title">
           {icon && (
             <span className="icon">
               <Icon name={icon} />
@@ -25,7 +24,7 @@ const SearchLink = ({ icon, title, content_type, url, excerpt }: Props) => {
           <Icon name="caretRight" />
         </div>
       </div>
-      {excerpt && <p className="result-excerpt" dangerouslySetInnerHTML={{ __html: excerpt }} />}
+      {excerpt && <p className="n-result-excerpt" dangerouslySetInnerHTML={{ __html: excerpt }} />}
     </a>
   );
 };

package/packages/{styles/search.css → components/preact/SearchModal/components/SearchModal/SearchModal.css}

@@ -1,106 +1,86 @@
-/* Imports */
-@import url('./tokens.css');
-@import url('./utils.css');
-
 /* Root Variables */
-.search-modal {
-  --ntl-search-padding-inline: .5em;
-  --ntl-search-color-text: var(--color-text-2);
-  --ntl-search-color-bg: var(--color-bg-1);
-  --ntl-search-color-border: var(--color-bg-3);
-  --ntl-search-border-radius: 8px;
-  --ntl-search-max-w: 600px;
-  --ntl-search-text-highlight: var(--color-text-accent);
-  --ntl-search-footer-key-color-text: var(--color-text-2);
+.n-search-modal {
+  --n-search-padding-inline: .5em;
+  --n-search-color-text: var(--color-text-1, currentColor);
+  --n-search-color-text-secondary: var(--color-text-2, currentColor);
+  --n-search-color-bg: var(--color-bg-1);
+  --n-search-color-bg-2: var(--color-bg-2);
+  --n-search-color-border: var(--color-bg-3);
+  --n-search-border-radius: 8px;
+  --n-search-max-w: 600px;
+  --n-search-text-highlight: var(--color-text-accent);
+}
+
+.n-search-modal {
+  padding: 0;
+  border: none;
+  border-radius: var(--n-search-border-radius);
+  width: min(var(--n-search-max-w), 100%);
+  margin-inline: auto;
 }
 
 /* Container Styles */
-.search-container {
-  --mark-bg: var(--ntl-search-text-highlight);
+.n-search-container {
+  --mark-bg: var(--n-search-text-highlight);
   display: grid;
-  width: min(var(--ntl-search-max-w), 100%);
+  width: min(var(--n-search-max-w), 100%);
   min-height: 470px;
-  background-color: var(--ntl-search-color-bg);
-  border-radius: var(--ntl-search-border-radius);
+  background-color: var(--n-search-color-bg);
+  border-radius: var(--n-search-border-radius);
   overflow: hidden;
 }
 
-.search-modal {
-  padding: 0;
-  border: none;
-  border-radius: var(--ntl-search-border-radius);
-  width: min(var(--ntl-search-max-w), 100%);
-  margin-inline: auto;
-}
-
 /* Search Bar */
-.search {
+.n-search-bar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   overflow: hidden;
-  background: var(--ntl-search-color-bg);
-  border-bottom: 1px solid var(--ntl-search-color-border);
-}
-
-.search > * {
-  display: inline-block;
-}
-
-.search-trigger {
-  width: var(--ntl-search-icon-size, 1rem);
-  height: auto;
-  border: none;
-  background: none;
-  padding: 0;
-  cursor: pointer;
-  padding-inline: var(--space-2xs);
-  color: var(--color-text-1);
-  box-sizing: content-box;
-  display: block;
+  background: var(--n-search-color-bg);
+  border-bottom: 1px solid var(--n-search-color-border);
 }
 
 /* Search Input */
-.search-input-wrapper {
+.n-search-input-wrapper {
   all: unset;
   display: flex;
   width: 100%;
 }
 
-.search-input {
+.n-search-input {
   display: inline-flex;
   box-sizing: border-box;
-  background: var(--ntl-search-color-bg);
+  background: var(--n-search-color-bg);
   inline-size: 100%;
   padding-block: .75rem;
-  padding-inline: var(--ntl-search-padding-inline);
+  padding-inline: var(--n-search-padding-inline);
   flex: 1;
   border: none;
   outline: none;
   font-size: 1rem;
 }
 
-.search-input::placeholder {
-  color: var(--ntl-search-color-text);
+.n-search-input::placeholder {
+  color: var(--n-search-color-text);
 }
 
 /* Search Label */
-.search-label {
+.n-search-label {
   display: flex;
-  padding-inline: var(--ntl-search-padding-inline);
+  padding-inline: var(--n-search-padding-inline);
 }
 
-.search-label > * {
+.n-search-label > * {
   display: inline-block;
   margin: 0;
 }
 
 /* Icons */
-.search-icon {
+.n-search-icon {
   display: flex;
   width: 1em;
   height: auto;
-  color: lightgray;
+  color: var(--n-search-color-text-secondary);
 }
 
 .icon {
@@ -112,70 +92,62 @@
 
 .icon [data-icon="caretRight"] {
   width: 10px;
-  color: var(--neutral-300);
+  color: var(--n-search-color-text-secondary);
 }
 
 /* Search Key & Term */
-.search-term {
+.n-search-term {
   font-weight: var(--font-medium);
   font-size: 1.1em;
 }
 
 /* Search Results */
-.search-results-heading {
-  padding-inline: 1rem;
-  margin-block: var(--space-xs);
-  font-size: var(--step--2);
-  font-weight: var(--font-regular);
-  color: var(--color-text-3);
-}
-
-.search-window {
+.n-search-window {
   height: 400px;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
   margin-block: 0;
-  background: var(--ntl-search-color-bg);
+  background: var(--n-search-color-bg);
 }
 
-.results-list, ul[role="list"] {
+.n-results-list, ul[role="list"] {
   list-style: none;
   padding: 0;
 }
 
-.results-list-item {
+.n-results-list-item {
   border-bottom: 1px solid var(--color-bg-3);
 }
-.results-list-item:first-of-type {
+.n-results-list-item:first-of-type {
   border-top: 1px solid var(--color-bg-3);
 }
 
 /* Result Items */
-.result-link {
+.n-result-link {
   all: unset;
   display: flex;
   flex-wrap: wrap;
   row-gap: var(--space-3xs);
-  padding: var(--ntl-result-padding-block, 1em) var(--ntl-result-padding-inline, 1rem);
+  padding: var(--n-result-padding-block, 1em) var(--n-result-padding-inline, 1rem);
   font-size: var(--step--1);
   font-weight: var(--font-regular);
   text-decoration: none;
   cursor: pointer;
 }
 
-.result-link:is(:hover, :focus-within) {
-  background: var(--neutral-100);
+.n-result-link:is(:hover, :focus-within) {
+  background: var(--n-search-color-bg-2);
 }
 
-.result-header {
+.n-result-header {
   display: flex;
   justify-content: space-between;
   width: 100%;
   align-items: center;
 }
 
-.result-title {
+.n-result-title {
   display: flex;
   align-items: center;
   gap: var(--space-s);
@@ -183,7 +155,7 @@
   color: var(--color-text-2);
 }
 
-.result-excerpt {
+.n-result-excerpt {
   color: var(--color-text-3);
   line-height: 1.3;
   font-size: .9em;
@@ -191,17 +163,17 @@
 }
 
 /* Footer */
-.search-footer {
-  border-top: 1px solid var(--ntl-search-color-border);
+.n-search-footer {
+  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);
 }
 
-.search-footer-tip {
-  --ntl-key-text-color: var(--ntl-search-footer-key-color-text);
-  color: var(--ntl-search-footer-key-color-text);
+.n-search-footer-tip {
+  --n-key-text-color: var(--n-search-color-text-secondary);
+  color: var(--n-search-color-text-secondary);
   display: flex;
   gap: var(--space-2xs);
   align-items: center;
@@ -209,7 +181,7 @@
 }
 
 /* Animations */ 
-.search-modal {
+.n-search-modal {
   transition: display .2s allow-discrete, overlay .2s allow-discrete;
   animation: closeSearch .2s forwards;
   &[open] {
@@ -242,11 +214,11 @@
   }
 }
 
-.search-modal::backdrop {
+.n-search-modal::backdrop {
   animation: closeSearchBackdrop .2s forwards;
 }
 
-.search-modal[open]::backdrop  {
+.n-search-modal[open]::backdrop  {
   animation: openSearchBackdrop .2s forwards;
 }
 

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

@@ -0,0 +1,78 @@
+import { type ComponentChildren } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import cn from "classnames"
+
+import Modal from '@components/preact/Modal/Modal';
+import KeyboardKey from '@components/preact/KeyboardKey/KeyboardKey';
+import SearchWindow from '../../components/SearchWindow';
+import SearchInput from '../../components/SearchInput';
+import { useClickOutside } from '@utils/useClickOutside';
+import {
+  useSearch,
+  useKeyboardNav,
+  useSearchHotkeys,
+  useSearchParams,
+  useSearchToggles,
+} from '../../hooks';
+
+import './SearchModal.css';
+
+interface Props {
+  children: ComponentChildren;
+  className: string;
+}
+
+function SearchModal(props: Props) {
+  const { children, className, ...rest } = props;
+  const { state, actions } = useSearch();
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  const openSearch = () => setSearchOpen(true);
+  const closeSearch = () => setSearchOpen(false);
+
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
+
+  useSearchToggles(openSearch);
+  useSearchParams(actions.setSearchTerm, openSearch);
+  useSearchHotkeys(searchOpen, openSearch, closeSearch);
+  useKeyboardNav(modalRef, searchOpen, closeSearch);
+
+  useEffect(() => {
+    if (!modalRef.current) return;
+    searchOpen ? modalRef.current.showModal() : modalRef.current.close();
+  }, [searchOpen]);
+
+  return (
+    <Modal ref={modalRef} className={cn(className, 'n-search-modal')} {...rest}>
+      <div ref={containerRef} className="n-search-container">
+        <form className="n-search-bar">
+          <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
+        </form>
+
+        <SearchWindow
+          searchLoading={state.isLoading}
+          searchTerm={state.searchTerm}
+          results={state.results}
+        >
+          {children}
+        </SearchWindow>
+
+        <div className="n-search-footer">
+          <p className="n-search-footer-tip">
+            <KeyboardKey keyNames={['Esc']} />
+            to close
+          </p>
+          <p className="n-search-footer-tip">
+            <KeyboardKey keyNames={['Tab']} />
+            <span>or</span>
+            <KeyboardKey keyNames={['↑', '↓']} />
+            to navigate
+          </p>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default SearchModal;

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

@@ -1,4 +1,4 @@
-.search-toggle {
+.n-search-toggle {
   all: unset;
   outline: revert;
   cursor: pointer;
@@ -8,6 +8,6 @@
   max-width: max-content;
 }
 
-.search-toggle:disabled {
+.n-search-toggle:disabled {
   opacity: .3;
 }

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

@@ -10,7 +10,7 @@ interface Props {
 
 export default forwardRef(function SearchToggle(props: Props, ref: Ref<HTMLButtonElement>) {
   return (
-    <button id={props.id} ref={ref} class="search-toggle" disabled data-ntl-search-toggle>
+    <button id={props.id} ref={ref} class="n-search-toggle" disabled data-ntl-search-toggle>
       <span class="visually-hidden">Search</span>
       <Icon name={props.iconName || 'search'} />
     </button>

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

@@ -1,8 +1,6 @@
-import { h } from 'preact';
-
 import type { FunctionComponent } from 'preact';
 import type { ResultProps, SearchResultsProps, SearchWindowProps } from '../types/search.types';
-import SearchHeading from './SearchHeading';
+import SearchHeading from './SearchHeading/SearchHeading';
 import SearchLink from './SearchLink';
 
 /* --- Search Results Window (for active searches) --- */
@@ -14,7 +12,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
   if (searchLoading) {
     return (
       <SearchHeading>
-        Searching for <span className="search-term">{searchTerm}</span> ...
+        Searching for <span className="n-search-term">{searchTerm}</span> ...
       </SearchHeading>
     );
   }
@@ -22,15 +20,15 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
   if (!results || results.length === 0) {
     return (
       <SearchHeading>
-        0 results for <span className="search-term">{searchTerm}</span>
+        0 results for <span className="n-search-term">{searchTerm}</span>
       </SearchHeading>
     );
   }
 
   return (
-    <ul className="results-list" role="list">
+    <ul className="n-results-list" role="list">
       {results.slice(0, 15).map((result, idx) => (
-        <li key={idx} className="results-list-item">
+        <li key={idx} className="n-results-list-item">
           <SearchLink {...result} />
         </li>
       ))}
@@ -52,7 +50,7 @@ export default function SearchWindow({
   };
 
   return (
-    <div className="search-window">
+    <div className="n-search-window">
       <div className="search-links">
         <SearchLink {...askNetlify} />
         {searchTerm ? (

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

@@ -0,0 +1,5 @@
+export { useSearch } from '../hooks/useSearch';
+export { useKeyboardNav } from '../hooks/useKeyboardNav';
+export { useSearchHotkeys } from '../hooks/useSearchHotkeys';
+export { useSearchParams } from '../hooks/useSearchParams';
+export { useSearchToggles } from '../hooks/useSearchToggles';

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

@@ -1,72 +1,6 @@
-import { type ComponentChildren } from 'preact';
-import { useState, useEffect, useRef } from 'preact/hooks';
-
-import Modal from '../Modal';
-import { SearchFooter, SearchFooterTip, SearchInput, SearchWindow } from './components';
-import KeyboardKey from '../KeyboardKey';
-import { useSearch } from './hooks/useSearch';
-import { useKeyboardNav } from './hooks/useKeyboardNav';
-import { useSearchHotkeys } from './hooks/useSearchHotkeys';
-import { useSearchParams } from './hooks/useSearchParams';
-import { useSearchToggles } from './hooks/useSearchToggles';
-import { useClickOutside } from '../../../utils/useClickOutside';
-
-import '../../../styles/search.css';
-
-interface Props {
-  children: ComponentChildren;
-}
-
-function SearchModal({ children }: Props) {
-  const { state, actions } = useSearch();
-  const [searchOpen, setSearchOpen] = useState(false);
-
-  const openSearch = () => setSearchOpen(true);
-  const closeSearch = () => setSearchOpen(false);
-
-  const modalRef = useRef<HTMLDialogElement>(null);
-  const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
-
-  useSearchToggles(openSearch);
-  useSearchParams(actions.setSearchTerm, openSearch);
-  useSearchHotkeys(searchOpen, openSearch, closeSearch);
-  useKeyboardNav(modalRef, searchOpen, closeSearch);
-
-  useEffect(() => {
-    if (!modalRef.current) return;
-    searchOpen ? modalRef.current.showModal() : modalRef.current.close();
-  }, [searchOpen]);
-
-  return (
-    <Modal ref={modalRef} className="search-modal">
-      <div ref={containerRef} class="search-container">
-        <form class="search">
-          <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
-        </form>
-
-        <SearchWindow
-          searchLoading={state.isLoading}
-          searchTerm={state.searchTerm}
-          results={state.results}
-        >
-          {children}
-        </SearchWindow>
-
-        <SearchFooter>
-          <SearchFooterTip>
-            <KeyboardKey keyNames={['Esc']} />
-            to close
-          </SearchFooterTip>
-          <SearchFooterTip>
-            <KeyboardKey keyNames={['Tab']} />
-            <span>or</span>
-            <KeyboardKey keyNames={['↑', '↓']} />
-            to navigate
-          </SearchFooterTip>
-        </SearchFooter>
-      </div>
-    </Modal>
-  );
-}
-
-export default SearchModal;
+export { default as SearchHeading } from './components/SearchHeading/SearchHeading';
+export { default as SearchInput } from './components/SearchInput';
+export { default as SearchLink } from './components/SearchLink';
+export { default as SearchToggle } from './components/SearchToggle/SearchToggle';
+export { default as SearchWindow } from './components/SearchWindow';
+export { default as SearchModal } from './components/SearchModal/SearchModal';

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

@@ -1,4 +1,4 @@
-import type { ComponentChildren, FunctionComponent } from 'preact';
+import type { ComponentChildren } from 'preact';
 import type { IconName } from '../../Icon';
 
 export interface ResultProps {

package/packages/components/preact/index.ts

@@ -1,9 +1,9 @@
-export { default as KeyboardKey } from './KeyboardKey';
-export { default as Modal } from './Modal';
+export { default as KeyboardKey } from './KeyboardKey/KeyboardKey';
+export { default as Modal } from './Modal/Modal';
 export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink';
-export { default as SearchHeading } from './SearchModal/components/SearchHeading';
+export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
-export { default as SearchModal } from './SearchModal';
+export { SearchModal } from './SearchModal';
 
 export { type IconName } from './Icon';