@rimelight/ui 0.0.37 → 0.0.39

package/src/components/search/RLASearch.astro

@@ -0,0 +1,281 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { SearchProps } from "./search"
+import searchTheme from "./search.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+import RLAInput from "../input/RLAInput.astro"
+import RLAKbd from "../kbd/RLAKbd.astro"
+import RLAButton from "../button/RLAButton.astro"
+
+
+const search = scv(searchTheme)
+
+const {
+  endpoint = "/api/search",
+  placeholder = "Search...",
+  messages = {},
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SearchProps
+
+const classes = resolveClasses(search, {}, useUi("search", uiProp), className)
+
+// Default messages
+const searchPlaceholder = messages.searchPlaceholder || placeholder
+const noResultsLabel = messages.noResultsLabel || "No results found"
+const footerCloseHint = messages.footerCloseHint || "Escape to close"
+const footerBackendHint = messages.footerBackendHint || "Postgres Full-Text Search"
+
+// Generate unique IDs for this instance to avoid collisions if multiple search bars exist
+const uniqueId = Math.random().toString(36).slice(2, 8)
+const triggerId = `search-trigger-${uniqueId}`
+const modalId = `search-modal-${uniqueId}`
+const inputId = `search-input-${uniqueId}`
+const resultsId = `search-results-${uniqueId}`
+const emptyId = `search-empty-${uniqueId}`
+---
+
+<rla-search 
+  class:list={[classes.root, "rla-search-wrapper"]} 
+  data-slot="root" 
+  data-trigger-id={triggerId} 
+  data-modal-id={modalId} 
+  data-input-id={inputId} 
+  data-results-id={resultsId} 
+  data-empty-id={emptyId}
+  data-endpoint={endpoint}
+  {...rest}
+>
+  {Astro.slots.has("trigger") ? (
+    <div id={triggerId} class="cursor-pointer">
+      <slot name="trigger" />
+    </div>
+  ) : (
+    <RLAButton
+      id={triggerId}
+      variant="ghost"
+      color="neutral"
+      square
+      aria-label="Open Search"
+    >
+      <RLAIcon name="search" class="w-5 h-5" />
+    </RLAButton>
+  )}
+
+  <!-- Search modal -->
+  <div id={modalId} class={classes.modal} data-slot="modal">
+    <div class={classes.dialog} data-slot="dialog">
+      <!-- Search header -->
+      <div class={classes.header} data-slot="header">
+        <RLAInput
+          variant="ghost"
+          type="text"
+          id={inputId}
+          placeholder={searchPlaceholder}
+          autocomplete="off"
+          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"
+          }}
+        >
+          <RLAIcon name="search" class={classes.headerIcon} slot="leading" />
+          <div slot="trailing" class="flex items-center gap-2">
+            <RLAKbd size="sm">Esc</RLAKbd>
+            <button id={`${modalId}-close`} class={classes.close} aria-label="Close search">
+              <RLAIcon name="close" class={classes.closeIcon} />
+            </button>
+          </div>
+        </RLAInput>
+      </div>
+
+      <!-- Results list -->
+      <div id={resultsId} class={classes.results} data-slot="results"></div>
+
+      <!-- Empty state -->
+      <div id={emptyId} class={classes.empty} data-slot="empty">
+        {noResultsLabel}
+      </div>
+
+      <!-- Footer -->
+      <div class={classes.footer} data-slot="footer">
+        <span>{footerCloseHint}</span>
+        <span>{footerBackendHint}</span>
+      </div>
+    </div>
+  </div>
+</rla-search>
+
+<script>
+  import { defineShortcuts } from "../../utils/shortcuts"
+
+  class RLASearch extends HTMLElement {
+    private searchCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const triggerId = this.dataset.triggerId;
+      const modalId = this.dataset.modalId;
+      const inputId = this.dataset.inputId;
+      const resultsId = this.dataset.resultsId;
+      const emptyId = this.dataset.emptyId;
+      const endpoint = this.dataset.endpoint;
+
+      const trigger = this.querySelector(`#${triggerId}`);
+      const modal = this.querySelector(`#${modalId}`) as HTMLElement | null;
+      const closeBtn = this.querySelector(`#${modalId}-close`);
+      const input = this.querySelector(`#${inputId}`) as HTMLInputElement | null;
+      const resultsContainer = this.querySelector(`#${resultsId}`) as HTMLElement | null;
+      const emptyState = this.querySelector(`#${emptyId}`) as HTMLElement | null;
+
+      // Teleport modal to body to avoid containing block/transform clipping from header containers
+      if (modal && modal.parentNode !== document.body) {
+        document.body.appendChild(modal);
+      }
+
+      let escapeCleanup: (() => void) | null = null;
+
+      const openModal = () => {
+        modal?.classList.remove("hidden");
+        modal?.classList.add("flex");
+        input?.focus();
+        document.body.style.overflow = "hidden";
+
+        escapeCleanup = defineShortcuts({
+          escape: {
+            handler: () => closeModal(),
+            usingInput: true
+          }
+        });
+      };
+
+      const closeModal = () => {
+        modal?.classList.add("hidden");
+        modal?.classList.remove("flex");
+        document.body.style.overflow = "";
+        if (input) input.value = "";
+        if (resultsContainer) resultsContainer.innerHTML = "";
+        emptyState?.classList.add("hidden");
+
+        if (escapeCleanup) {
+          escapeCleanup();
+          escapeCleanup = null;
+        }
+      };
+
+      const onTriggerClick = () => openModal();
+      const onCloseClick = () => closeModal();
+      const onModalClick = (e: MouseEvent) => {
+        const target = e.target as HTMLElement | null;
+        if (target && (target === modal || !target.closest('[data-slot="dialog"]'))) {
+          closeModal();
+        }
+      };
+
+      trigger?.addEventListener("click", onTriggerClick);
+      closeBtn?.addEventListener("click", onCloseClick);
+      modal?.addEventListener("click", onModalClick);
+
+      // Register global shortcut key Cmd+K / Ctrl+K
+      const metaKCleanup = defineShortcuts({
+        meta_k: {
+          handler: () => openModal(),
+          label: "Open Search",
+          description: "Open the global site search modal",
+          category: "navigation"
+        }
+      });
+
+      let debounceTimer: any;
+      const onInput = () => {
+        clearTimeout(debounceTimer);
+        const query = input?.value.trim();
+        if (!query) {
+          if (resultsContainer) resultsContainer.innerHTML = "";
+          emptyState?.classList.add("hidden");
+          return;
+        }
+
+        debounceTimer = setTimeout(async () => {
+          try {
+            console.log("[Search UI] Fetching search results for:", query);
+            const res = await fetch(`${endpoint}?q=${encodeURIComponent(query)}`);
+            
+            if (!res.ok) {
+              throw new Error(`HTTP status: ${res.status}`);
+            }
+
+            const results = await res.json();
+            console.log("[Search UI] Received results:", results);
+
+            if (resultsContainer) resultsContainer.innerHTML = "";
+
+            if (!Array.isArray(results) || results.length === 0) {
+              emptyState?.classList.remove("hidden");
+              return;
+            }
+
+            emptyState?.classList.add("hidden");
+            results.forEach((item) => {
+              const div = document.createElement("a");
+              div.href = item.url || "#";
+              div.className = "flex flex-col gap-1 p-3 hover:bg-neutral-800 rounded-lg transition-colors border border-transparent hover:border-neutral-700 text-left decoration-none";
+              
+              div.innerHTML = `
+                <div class="flex items-center justify-between">
+                  <span class="text-sm font-semibold text-white">${item.title || "Untitled"}</span>
+                  ${item.sourceType ? `<span class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-neutral-800 text-neutral-400 font-mono">${item.sourceType}</span>` : ""}
+                </div>
+                ${item.snippet ? `<p class="text-xs text-neutral-400 line-clamp-2 m-0">${item.snippet}</p>` : ""}
+              `;
+              resultsContainer?.appendChild(div);
+            });
+          } catch (err) {
+            console.error("[Search UI] Search failed:", err);
+            if (resultsContainer) resultsContainer.innerHTML = "";
+            emptyState?.classList.remove("hidden");
+          }
+        }, 200);
+      };
+      input?.addEventListener("input", onInput);
+
+      this.searchCleanup = () => {
+        clearTimeout(debounceTimer);
+        trigger?.removeEventListener("click", onTriggerClick);
+        closeBtn?.removeEventListener("click", onCloseClick);
+        modal?.removeEventListener("click", onModalClick);
+        input?.removeEventListener("input", onInput);
+        if (escapeCleanup) escapeCleanup();
+        metaKCleanup();
+        if (modal && modal.parentNode === document.body) {
+          modal.remove();
+        }
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.searchCleanup) {
+        this.searchCleanup();
+        this.searchCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-search')) {
+    customElements.define('rla-search', RLASearch);
+  }
+</script>
+
+<style is:global>
+  #search-results mark {
+    background-color: rgba(168, 85, 247, 0.3) !important;
+    color: rgb(233, 213, 255) !important;
+    padding-left: 2px;
+    padding-right: 2px;
+    border-radius: 4px;
+  }
+</style>

package/src/components/search/search.theme.ts

@@ -0,0 +1,64 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createSearchTheme = () =>
+  defineTheme({
+    slots: [
+      "root",
+      "trigger",
+      "triggerIcon",
+      "triggerLabel",
+      "triggerKbd",
+      "modal",
+      "dialog",
+      "header",
+      "headerIcon",
+      "input",
+      "close",
+      "closeIcon",
+      "results",
+      "resultItem",
+      "resultHeader",
+      "resultTitle",
+      "resultBadge",
+      "resultSnippet",
+      "empty",
+      "footer",
+      "footerHint"
+    ],
+    base: {
+      root: "relative inline-block",
+      trigger:
+        "flex items-center gap-xs text-neutral-400 hover:text-white transition-colors bg-neutral-900 border border-neutral-800 rounded-full px-3 py-1.5 text-sm cursor-pointer",
+      triggerIcon: "w-4 h-4",
+      triggerLabel: "hidden lg:inline text-xs opacity-60",
+      triggerKbd:
+        "hidden lg:inline-flex items-center gap-0.5 text-[10px] bg-neutral-800 border border-neutral-700 px-1.5 py-0.5 rounded font-sans text-neutral-400",
+      modal:
+        "fixed inset-0 z-[1000] hidden items-start justify-center pt-[10vh] px-4 bg-black/70 backdrop-blur-sm",
+      dialog:
+        "bg-neutral-900 border border-neutral-800 rounded-xl w-full max-w-xl shadow-2xl overflow-hidden flex flex-col",
+      header: "flex items-center border-b border-neutral-800 px-4 py-3",
+      headerIcon: "text-neutral-400 w-5 h-5 mr-3",
+      input:
+        "bg-transparent text-white placeholder-neutral-500 focus:outline-none flex-1 text-base border-none p-0",
+      close:
+        "text-neutral-400 hover:text-white transition-colors bg-transparent border-0 cursor-pointer p-0 flex items-center justify-center",
+      closeIcon: "w-5 h-5",
+      results: "max-h-[350px] overflow-y-auto p-2 empty:hidden flex flex-col gap-1",
+      resultItem:
+        "flex flex-col gap-1 p-3 hover:bg-neutral-800 rounded-lg transition-colors border border-transparent hover:border-neutral-700 text-left decoration-none",
+      resultHeader: "flex items-center justify-between",
+      resultTitle: "text-sm font-semibold text-white",
+      resultBadge:
+        "text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-neutral-800 text-neutral-400 font-mono",
+      resultSnippet: "text-xs text-neutral-400 line-clamp-2 m-0",
+      empty: "p-6 text-center text-neutral-500 text-sm hidden",
+      footer:
+        "bg-neutral-950 border-t border-neutral-800 px-4 py-2 flex items-center justify-between text-[11px] text-neutral-500",
+      footerHint: "flex items-center gap-1"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createSearchTheme()

package/src/components/select/RLASelect.astro

@@ -0,0 +1,150 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { SelectProps } from "./select"
+import selectTheme from "./select.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const select = scv(selectTheme)
+
+const {
+  items = [],
+  value = "",
+  placeholder = "Select item...",
+  disabled = false,
+  name,
+  label,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SelectProps
+
+const classes = resolveClasses(select, {
+  size
+}, useUi("select", uiProp), className);
+
+const normalizedItems = items.map(item => {
+  if (typeof item === "string") {
+    return { label: item, value: item }
+  }
+  return item
+})
+
+const selectedItem = normalizedItems.find(item => item.value === value)
+const initialLabel = selectedItem ? selectedItem.label : ""
+---
+<rla-select {...rest}>
+  <div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
+    {label && <label class={classes.label} data-slot="label">{label}</label>}
+    
+    <div class="relative w-full" data-select-wrapper>
+      <button
+        type="button"
+        class={classes.trigger}
+        data-slot="trigger"
+        disabled={disabled}
+        data-select-trigger
+      >
+        <span data-select-value>{initialLabel || placeholder}</span>
+        <RLAIcon name="chevronDown" class="ml-2 size-4 opacity-50" />
+      </button>
+
+      <div class={classes.content + " hidden"} data-select-dropdown data-slot="content">
+        <div class="py-1" data-select-items>
+          {normalizedItems.map(item => (
+            <div
+              class={classes.item}
+              data-slot="item"
+              data-value={item.value}
+              data-label={item.label}
+              data-select-item
+            >
+              <span class={classes.itemText}>{item.label}</span>
+              <RLAIcon name="check" class={classes.itemIcon + " hidden"} data-check-icon />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+    <input type="hidden" name={name} value={value} data-select-hidden-input />
+  </div>
+</rla-select>
+
+<script>
+  class RLASelect extends HTMLElement {
+    private selectCleanup: (() => void) | null = null;
+    private initTimeout: any = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      this.initTimeout = setTimeout(() => {
+        const wrapper = this.querySelector("[data-select-wrapper]") as HTMLElement | null;
+        if (!wrapper) return;
+
+        const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
+        const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
+        const items = wrapper.querySelectorAll<HTMLElement>("[data-select-item]");
+        const valueSpan = wrapper.querySelector("[data-select-value]");
+        const hiddenInput = this.querySelector("[data-select-hidden-input]") as HTMLInputElement | null;
+
+        if (!trigger || !dropdown) return;
+
+        const onTriggerClick = (e: MouseEvent) => {
+          e.stopPropagation();
+          dropdown.classList.toggle("hidden");
+        };
+        trigger.addEventListener("click", onTriggerClick);
+
+        const itemCleanups: (() => void)[] = [];
+        items.forEach(item => {
+          const onItemClick = (e: MouseEvent) => {
+            e.stopPropagation();
+            const val = (item as HTMLElement).dataset.value || "";
+            const label = (item as HTMLElement).dataset.label || "";
+            if (hiddenInput) {
+              hiddenInput.value = val;
+              hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+            }
+            if (valueSpan) valueSpan.textContent = label;
+            
+            items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
+            item.querySelector("[data-check-icon]")?.classList.remove("hidden");
+            
+            dropdown.classList.add("hidden");
+          };
+          item.addEventListener("click", onItemClick);
+          itemCleanups.push(() => item.removeEventListener("click", onItemClick));
+        });
+
+        const onDocumentClick = () => {
+          dropdown.classList.add("hidden");
+        };
+        document.addEventListener("click", onDocumentClick);
+
+        this.selectCleanup = () => {
+          trigger.removeEventListener("click", onTriggerClick);
+          itemCleanups.forEach(fn => fn());
+          document.removeEventListener("click", onDocumentClick);
+        };
+      }, 0);
+    }
+
+    disconnectedCallback() {
+      if (this.initTimeout) {
+        clearTimeout(this.initTimeout);
+      }
+      if (this.selectCleanup) {
+        this.selectCleanup();
+        this.selectCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-select')) {
+    customElements.define('rla-select', RLASelect);
+  }
+</script>

package/src/components/select/RLVSelect.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, useAttrs } from "vue"
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { SelectProps } from "./select"
+import selectThemeDefault from "./select.theme"
+import RLVIcon from "../icon/RLVIcon.vue"
+
+defineOptions({ name: "RLVSelect" })
+
+const attrs = useAttrs()
+const selectScv = scv(selectThemeDefault)
+
+const modelValue = defineModel<string | number | undefined>()
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  size: "md",
+  color: "neutral",
+  disabled: false
+})
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    selectScv,
+    {
+      size: props.size,
+      color: props.color,
+      disabled: props.disabled
+    },
+    useUi("select", props.ui),
+    props.class
+  )
+)
+
+const normalizedItems = computed(() => {
+  if (!props.items) return []
+  return props.items.map((item) => {
+    if (typeof item === "string") {
+      return { label: item, value: item }
+    }
+    return item
+  })
+})
+</script>
+
+<template>
+  <div :class="resolvedClasses.root" data-slot="root">
+    <select
+      v-bind="attrs"
+      v-model="modelValue"
+      :name="name"
+      :disabled="disabled"
+      :class="resolvedClasses.select"
+      data-slot="select"
+    >
+      <option v-if="placeholder" value="" disabled selected hidden>
+        {{ placeholder }}
+      </option>
+      <option
+        v-for="item in normalizedItems"
+        :key="String(item.value)"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+        {{ item.label }}
+      </option>
+    </select>
+    <span :class="resolvedClasses.icon" data-slot="icon">
+      <RLVIcon name="i-lucide-chevron-down" class="size-4" />
+    </span>
+  </div>
+</template>

package/src/components/select/select.theme.ts

@@ -0,0 +1,29 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createSelectTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "trigger", "content", "item", "itemText", "itemIcon"],
+    base: {
+      root: "relative w-full flex flex-col gap-1.5",
+      label: "text-sm font-medium text-foreground",
+      trigger:
+        "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      content:
+        "absolute z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-lg transition-all w-full mt-1 max-h-60 overflow-y-auto",
+      item: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      itemText: "truncate",
+      itemIcon: "ml-auto size-4"
+    },
+    variants: {
+      size: {
+        sm: { trigger: "h-8 px-2 text-xs", item: "py-1 px-1.5 text-xs" },
+        md: { trigger: "h-9 px-3 text-sm", item: "py-1.5 px-2 text-sm" },
+        lg: { trigger: "h-10 px-4 text-base", item: "py-2 px-2.5 text-base" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createSelectTheme()

package/src/components/select/select.ts

@@ -0,0 +1,44 @@
+import type { ThemeColor } from "../../types/component"
+export interface SelectProps {
+  /**
+   * List of options.
+   */
+  items?: Array<{ label: string; value: string; [key: string]: any } | string>
+  /**
+   * Selected value.
+   */
+  value?: string | string[]
+  /**
+   * Placeholder text.
+   */
+  placeholder?: string
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean
+  /**
+   * Form control name.
+   */
+  name?: string
+  /**
+   * Form label.
+   */
+  label?: string
+  /**
+   * Size scale.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Color theme.
+   */
+  color?: ThemeColor
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}