@rimelight/ui 0.0.47 → 0.0.49

package/src/components/scroll-to-top/RLSScrollToTop.tsx

@@ -0,0 +1,145 @@
+import { createMemo, createSignal, splitProps, onMount, onCleanup, type Component } from "solid-js"
+import type { ScrollToTopProps } from "./scroll-to-top"
+import { scrollToTopTheme } from "./scroll-to-top.theme"
+import { trackScroll, scrollToTop } from "./scroll"
+
+export interface RLSScrollToTopProps extends ScrollToTopProps {}
+
+const SCROLL_TO_TOP_CSS = `
+.rla-scroll-to-top-inner {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease-in-out;
+}
+.rla-scroll-to-top-inner.js-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.progress-circle-base {
+  position: relative;
+  transform: translateZ(0);
+}
+.gauge-track {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border-style: solid;
+}
+.gauge-progress {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    var(--gauge-color, var(--rl-primary-500)) 0deg,
+    var(--gauge-color, var(--rl-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
+    transparent calc(var(--gauge-progress, 0) * 3.6deg)
+  );
+  -webkit-mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--gauge-stroke-width, 6px)),
+    #000 calc(100% - var(--gauge-stroke-width, 6px))
+  );
+  mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--gauge-stroke-width, 6px)),
+    #000 calc(100% - var(--gauge-stroke-width, 6px))
+  );
+}
+`
+
+const RLSScrollToTop: Component<RLSScrollToTopProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "color",
+    "progressWidth",
+    "duration",
+    "threshold",
+    "showProgress",
+    "theme",
+    "ui",
+    "class"
+  ])
+
+  const [isVisible, setIsVisible] = createSignal(false)
+  const [scrollPercentage, setScrollPercentage] = createSignal(0)
+
+  onMount(() => {
+    const unsubscribe = trackScroll({ threshold: props.threshold ?? 200 }, (state) => {
+      setIsVisible(state.isVisible)
+      setScrollPercentage(state.scrollPercentage)
+    })
+    onCleanup(unsubscribe)
+  })
+
+  const resolvedClasses = createMemo(() =>
+    scrollToTopTheme({
+      color: props.color ?? "primary",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const color = () => props.color ?? "primary"
+  const progressWidth = () => props.progressWidth ?? 6
+  const gaugeBorderWidth = () => progressWidth() * 0.5
+
+  const progressStyle = () =>
+    ({
+      "--gauge-stroke-width": `${gaugeBorderWidth()}px`,
+      "--gauge-color": `var(--rl-${color()}-500)`,
+      "--gauge-progress": String(scrollPercentage())
+    }) as Record<string, string>
+
+  const trackStyle = () =>
+    ({
+      "border-width": `${gaugeBorderWidth()}px`,
+      "border-color": `var(--rl-${color()}-900)`,
+      "background-color": "#000"
+    }) as Record<string, string>
+
+  return (
+    <div
+      class={`rla-scroll-to-top-inner scroll-to-top-inner fixed bottom-6 right-6 z-50 ${resolvedClasses().root} ${
+        isVisible() ? "js-visible" : ""
+      }`}
+      data-slot="root"
+      data-theme={props.theme}
+      {...rest}
+    >
+      <button
+        type="button"
+        class={resolvedClasses().button}
+        aria-label="Scroll to top"
+        data-scroll-to-top-button
+        onClick={scrollToTop}
+      >
+        <div class={resolvedClasses().progressBase}>
+          <div class="gauge-track" style={trackStyle()} />
+          {props.showProgress ? (
+            <div class="gauge-progress" data-gauge-progress style={progressStyle()} />
+          ) : null}
+          <div class={resolvedClasses().iconContainer}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class={resolvedClasses().icon}
+            >
+              <path d="m5 12 7-7 7 7" />
+              <path d="M12 19V5" />
+            </svg>
+          </div>
+        </div>
+      </button>
+      <style>{SCROLL_TO_TOP_CSS}</style>
+    </div>
+  )
+}
+
+export default RLSScrollToTop

package/src/components/search/RLSSearch.tsx

@@ -0,0 +1,237 @@
+import {
+  createMemo,
+  createSignal,
+  For,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { SearchProps } from "./search"
+import { searchTheme } from "./search.theme"
+import RLSIcon from "../icon/RLSIcon"
+import RLSInput from "../input/RLSInput"
+import RLSKbd from "../kbd/RLSKbd"
+import RLSButton from "../button/RLSButton"
+import { defineShortcuts } from "../../shortcuts"
+
+export interface SearchResultItem {
+  title?: string
+  url?: string
+  sourceType?: string
+  snippet?: string
+  [key: string]: any
+}
+
+export interface RLSSearchProps extends SearchProps {
+  children?: JSX.Element
+  triggerSlot?: JSX.Element
+}
+
+const RLSSearch: Component<RLSSearchProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "endpoint",
+    "placeholder",
+    "messages",
+    "ui",
+    "class",
+    "children",
+    "triggerSlot"
+  ])
+
+  const endpoint = () => props.endpoint ?? "/api/search"
+  const searchPlaceholder = () =>
+    props.messages?.searchPlaceholder || props.placeholder || "Search..."
+  const noResultsLabel = () => props.messages?.noResultsLabel || "No results found"
+  const footerCloseHint = () => props.messages?.footerCloseHint || "Escape to close"
+  const footerBackendHint = () => props.messages?.footerBackendHint || "Postgres Full-Text Search"
+
+  const [isOpen, setIsOpen] = createSignal(false)
+  const [query, setQuery] = createSignal("")
+  const [results, setResults] = createSignal<SearchResultItem[]>([])
+  const [hasSearched, setHasSearched] = createSignal(false)
+  const [loading, setLoading] = createSignal(false)
+
+  let inputRef: HTMLInputElement | null = null
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined
+
+  const openModal = () => {
+    setIsOpen(true)
+    setTimeout(() => inputRef?.focus(), 50)
+  }
+
+  const closeModal = () => {
+    setIsOpen(false)
+    setQuery("")
+    setResults([])
+    setHasSearched(false)
+    if (debounceTimer) clearTimeout(debounceTimer)
+  }
+
+  onMount(() => {
+    const metaKCleanup = defineShortcuts({
+      meta_k: {
+        handler: () => openModal(),
+        label: "Open Search",
+        description: "Open the global site search modal",
+        category: "navigation"
+      }
+    })
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpen()) {
+        closeModal()
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown)
+
+    onCleanup(() => {
+      metaKCleanup()
+      window.removeEventListener("keydown", onKeyDown)
+      if (debounceTimer) clearTimeout(debounceTimer)
+    })
+  })
+
+  const handleInput = (val: string) => {
+    setQuery(val)
+    if (debounceTimer) clearTimeout(debounceTimer)
+
+    const trimmed = val.trim()
+    if (!trimmed) {
+      setResults([])
+      setHasSearched(false)
+      setLoading(false)
+      return
+    }
+
+    setLoading(true)
+    debounceTimer = setTimeout(async () => {
+      try {
+        const res = await fetch(`${endpoint()}?q=${encodeURIComponent(trimmed)}`)
+        if (!res.ok) throw new Error(`HTTP status ${res.status}`)
+        const data = await res.json()
+        setResults(Array.isArray(data) ? data : [])
+        setHasSearched(true)
+      } catch (err) {
+        console.error("[RLSSearch] Search query failed:", err)
+        setResults([])
+        setHasSearched(true)
+      } finally {
+        setLoading(false)
+      }
+    }, 200)
+  }
+
+  const resolvedClasses = createMemo(() =>
+    searchTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={`${resolvedClasses().root} rla-search-wrapper`} data-slot="root" {...rest}>
+      {props.triggerSlot ? (
+        <div class="cursor-pointer" onClick={openModal}>
+          {props.triggerSlot}
+        </div>
+      ) : props.children ? (
+        <div class="cursor-pointer" onClick={openModal}>
+          {props.children}
+        </div>
+      ) : (
+        <RLSButton
+          variant="ghost"
+          color="neutral"
+          square
+          aria-label="Open Search"
+          onClick={openModal}
+        >
+          <RLSIcon name="i-rl-search" class="w-5 h-5" />
+        </RLSButton>
+      )}
+
+      <Show when={isOpen()}>
+        <div
+          class={resolvedClasses().modal}
+          style={{ display: "flex" }}
+          data-slot="modal"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) closeModal()
+          }}
+        >
+          <div class={resolvedClasses().dialog} data-slot="dialog">
+            <div class={resolvedClasses().header} data-slot="header">
+              <RLSInput
+                ref={(el) => (inputRef = el)}
+                variant="ghost"
+                type="text"
+                value={query()}
+                placeholder={searchPlaceholder()}
+                autocomplete="off"
+                onInput={(e) => handleInput(e.currentTarget.value)}
+                leading={<RLSIcon name="i-rl-search" class={resolvedClasses().headerIcon} />}
+                trailing={
+                  <div class="flex items-center gap-2">
+                    <RLSKbd size="sm">Esc</RLSKbd>
+                    <button
+                      type="button"
+                      class={resolvedClasses().close}
+                      aria-label="Close search"
+                      onClick={closeModal}
+                    >
+                      <RLSIcon name="i-rl-close" class={resolvedClasses().closeIcon} />
+                    </button>
+                  </div>
+                }
+                ui={{
+                  root: "relative flex items-center w-full",
+                  input:
+                    "pl-8 pr-20 py-1.5 text-base outline-none text-white placeholder-neutral-500",
+                  leading: "absolute left-0 text-neutral-400 flex items-center",
+                  trailing: "absolute right-0 flex items-center gap-2"
+                }}
+              />
+            </div>
+
+            <div class={resolvedClasses().results} data-slot="results">
+              <For each={results()}>
+                {(item) => (
+                  <a
+                    href={item.url || "#"}
+                    class={resolvedClasses().resultItem}
+                    onClick={closeModal}
+                  >
+                    <div class={resolvedClasses().resultHeader}>
+                      <span class={resolvedClasses().resultTitle}>{item.title || "Untitled"}</span>
+                      {item.sourceType && (
+                        <span class={resolvedClasses().resultBadge}>{item.sourceType}</span>
+                      )}
+                    </div>
+                    {item.snippet && <p class={resolvedClasses().resultSnippet}>{item.snippet}</p>}
+                  </a>
+                )}
+              </For>
+            </div>
+
+            <Show when={hasSearched() && results().length === 0 && !loading()}>
+              <div class={resolvedClasses().empty} style={{ display: "block" }} data-slot="empty">
+                {noResultsLabel()}
+              </div>
+            </Show>
+
+            <div class={resolvedClasses().footer} data-slot="footer">
+              <span>{footerCloseHint()}</span>
+              <span>{footerBackendHint()}</span>
+            </div>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSSearch

package/src/components/select/RLASelect.astro

@@ -1,6 +1,7 @@
 ---
 import type { SelectProps, SelectItem } from "./select"
 import { selectTheme } from "./select.theme"
+import RLAButton from "../button/RLAButton.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 const {
@@ -12,14 +13,24 @@ const {
   required = false,
   name,
   size = "md",
+  variant = "default",
+  buttonVariant = "ghost",
+  buttonColor = "neutral",
   multiple,
+  leadingIcon,
   ui: _ui,
   class: classAttr,
   theme,
   ...rest
 } = Astro.props as SelectProps
 
-const classes = selectTheme({ size, class: classAttr })
+// Legacy prop values ("outline", "soft", "subtle", "ghost", "none") were never
+// implemented by the theme; normalize them to the default look.
+const resolvedVariant = variant === "default" || variant === "icon" ? variant : "default"
+
+const classes = selectTheme({ size, variant: resolvedVariant, class: classAttr })
+
+const hasLeading = !!(leadingIcon || Astro.slots.has("leading"))
 
 const currentValue = value !== undefined ? value : defaultValue !== undefined ? defaultValue : undefined
 const currentValues = Array.isArray(currentValue) ? currentValue.map(String) : undefined
@@ -43,15 +54,53 @@ const normalizedItems = (items || []).map((item: SelectItem) => {
     avatar: i.avatar
   }
 })
+
+const selectedItem =
+  currentValue !== undefined && !Array.isArray(currentValue)
+    ? normalizedItems.find((item) => String(item.value) === String(currentValue))
+    : undefined
+const currentLabel =
+  placeholder && (currentValue === undefined || (Array.isArray(currentValue) && currentValues?.length === 0))
+    ? placeholder
+    : selectedItem?.label ?? ""
 ---
 
 <div class={classes.root} data-slot="root" data-theme={theme}>
+  {resolvedVariant === "icon" ? (
+    <RLAButton
+      variant={buttonVariant}
+      color={buttonColor}
+      size={size}
+      theme={theme}
+      square
+      disabled={disabled}
+      leadingIcon={leadingIcon}
+      aria-hidden="true"
+      tabindex={-1}
+      type="button"
+      data-slot="trigger"
+    >
+      <slot name="leading" />
+    </RLAButton>
+  ) : hasLeading ? (
+    <span class={classes.leading} data-slot="leading">
+      {leadingIcon ? <RLAIcon name={leadingIcon} class="size-4" /> : <slot name="leading" />}
+    </span>
+  ) : null}
+
+  {resolvedVariant !== "icon" && (
+    <span class={classes.label} data-slot="label" aria-hidden="true">
+      {currentLabel}
+    </span>
+  )}
+
   <select
     class={classes.select}
     name={name}
     disabled={disabled}
     required={required}
     multiple={multiple}
+    aria-label={currentLabel}
     data-slot="select"
     {...rest}
   >
@@ -71,9 +120,11 @@ const normalizedItems = (items || []).map((item: SelectItem) => {
     ))}
   </select>
 
-  <span class={classes.icon} data-slot="icon">
-    <RLAIcon name="i-lucide-chevron-down" class="size-4" />
-  </span>
+  {resolvedVariant !== "icon" && (
+    <span class={classes.icon} data-slot="icon">
+      <RLAIcon name="i-lucide-chevron-down" class="size-4" />
+    </span>
+  )}
 </div>
 
 <style is:global>
@@ -117,3 +168,15 @@ const normalizedItems = (items || []).map((item: SelectItem) => {
     font-weight: 500;
   }
 </style>
+
+<script>
+  document.addEventListener("change", (event) => {
+    const target = event.target as HTMLSelectElement | null
+    if (!target || target.dataset.slot !== "select") return
+    const root = target.closest('[data-slot="root"]')
+    const label = root?.querySelector('[data-slot="label"]')
+    if (label) {
+      label.textContent = target.options[target.selectedIndex]?.text ?? ""
+    }
+  })
+</script>