@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLASearch.astro

@@ -1,282 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SearchProps } from "../../types"
-import searchThemeDefault, { createSearchTheme } from "../../themes/search.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import RLAInput from "./RLAInput.astro"
-import RLAKbd from "./RLAKbd.astro"
-import RLAButton from "./RLAButton.astro"
-
-const uiConfig = getUIConfig()
-const searchTheme = uiConfig.colors ? createSearchTheme() : searchThemeDefault
-
-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"
-    >
-      <span class="i-lucide-search 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"
-          }}
-        >
-          <span slot="leading" class={classes.headerIcon} />
-          <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">
-              <span class={classes.closeIcon}></span>
-            </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/astro/RLASelect.astro

@@ -1,151 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SelectProps } from "../../types"
-import selectThemeDefault, { createSelectTheme } from "../../themes/select.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const selectTheme = uiConfig.colors ? createSelectTheme() : selectThemeDefault
-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>
-        <span class="i-lucide-chevron-down 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>
-              <span class={classes.itemIcon + " hidden i-lucide-check"} 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/astro/RLASeparator.astro

@@ -1,83 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SeparatorProps } from "../../types"
-import separatorThemeDefault, { createSeparatorTheme } from "../../themes/separator.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import RLAAvatar from "./RLAAvatar.astro"
-import { cx } from "css-variants"
-
-const uiConfig = getUIConfig()
-const separatorTheme = uiConfig.colors ? createSeparatorTheme(uiConfig.colors) : separatorThemeDefault
-
-const separator = scv(separatorTheme)
-
-const {
-  orientation = "horizontal",
-  color = "neutral",
-  size = "xs",
-  type = "solid",
-  label,
-  icon,
-  avatar,
-  position = "center",
-  decorative = true,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SeparatorProps & {
-  color?: string
-  size?: "xs" | "sm" | "md" | "lg" | "xl"
-  type?: "solid" | "dashed" | "dotted"
-  position?: "start" | "center" | "end"
-}
-
-const classes = resolveClasses(separator, {
-  orientation,
-  color: color as "neutral",
-  size: size as "xs",
-  type: type as "solid",
-  position: position as "center"
-}, useUi("separator", uiProp), className)
----
-<div
-  class={classes.root}
-  data-slot="root"
-  role={decorative ? "none" : "separator"}
-  aria-orientation={decorative ? undefined : orientation}
-  {...rest}
->
-  <div class={classes.border} />
-
-  {(label || icon || avatar || Astro.slots.has("default")) && (
-    <>
-      <div class={classes.container} data-slot="container">
-        <slot name="avatar">
-          {avatar && (
-            <RLAAvatar 
-              {...(typeof avatar === 'string' ? { src: avatar } : avatar)} 
-              size={classes.avatarSize as any} 
-              class={classes.avatar} 
-              data-slot="avatar" 
-            />
-          )}
-        </slot>
-        
-        <slot name="icon">
-          {icon && (
-            <span class={classes.icon} data-slot="icon">
-              <span class={cx(icon)} aria-hidden="true" />
-            </span>
-          )}
-        </slot>
-
-        <span class={classes.label} data-slot="label">
-          {label}
-          <slot />
-        </span>
-      </div>
-
-      <div class={classes.border} />
-    </>
-  )}
-</div>

package/src/components/astro/RLAShare.astro

@@ -1,60 +0,0 @@
----
-import RLAButton from "./RLAButton.astro"
-import type { ButtonProps } from "../../types"
-
-interface Props extends Omit<ButtonProps, "href" | "label" | "leadingIcon" | "trailingIcon" | "loading" | "loadingAuto" | "square" | "active" | "activeColor" | "activeVariant"> {}
-
-const {
-  ...rest
-} = Astro.props
----
-
-<RLAButton
-  id="rl-share"
-  color="neutral"
-  variant="outline"
-  size="sm"
-  leadingIcon="i-lucide-share-2"
-  label="Share"
-  {...rest}
-/>
-
-<script>
-  function setupShare() {
-    const shareBtn = document.getElementById("rl-share") as (HTMLButtonElement & { rlShareRegistered?: boolean }) | null;
-    if (!shareBtn) return;
-
-    if (shareBtn.rlShareRegistered) return;
-    shareBtn.rlShareRegistered = true;
-
-    shareBtn.addEventListener("click", async () => {
-      if (navigator.share) {
-        try {
-          await navigator.share({ title: document.title, url: window.location.href });
-        } catch (err) {
-          const error = err as { name?: string };
-          if (error.name !== "AbortError") {
-            console.error("Share failed:", err);
-          }
-        }
-      } else {
-        try {
-          await navigator.clipboard.writeText(window.location.href);
-          const labelEl = shareBtn.querySelector('[data-slot="label"]');
-          if (labelEl) {
-            const origText = labelEl.textContent;
-            labelEl.textContent = "Link Copied!";
-            setTimeout(() => {
-              labelEl.textContent = origText;
-            }, 2000);
-          }
-        } catch (err) {
-          console.error("Failed to copy link:", err);
-        }
-      }
-    });
-  }
-
-  setupShare();
-  document.addEventListener("astro:after-swap", setupShare);
-</script>