@rimelight/ui 0.0.30 → 0.0.31

package/src/components/astro/RLALocaleSelector.astro

@@ -0,0 +1,110 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LocaleSelectorProps } from "../../types"
+import localeSelectorTheme from "../../themes/localeSelector.theme"
+import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n";
+
+const localeSelector = scv(localeSelectorTheme)
+
+const {
+    locales,
+    variant = "default",
+    size = "md",
+    ui: uiProp,
+    class: className,
+    ...rest
+} = Astro.props as LocaleSelectorProps;
+
+const classes = resolveClasses(localeSelector, {
+    variant,
+    size
+}, useUi("localeSelector", uiProp), className);
+
+const currentLocale = Astro.currentLocale ?? 'en';
+const localeUrls = [...new Map(getRelativeLocaleUrlList().map(url => {
+    const locale = url.split('/')[1] || 'en';
+    return [locale, url];
+})).values()];
+
+const processedLocales = locales && locales.length > 0
+    ? locales.map(item => typeof item === 'string' ? { code: item, label: item } : item)
+    : [...new Map(getRelativeLocaleUrlList().map(url => {
+        const locale = url.split('/')[1] || 'en';
+        return [locale, { code: locale, label: locale }];
+    })).values()];
+
+function getLocaleDisplayName(localeCode: string): string {
+    try {
+        const formatter = new Intl.DisplayNames([localeCode], { type: 'language' });
+        const nativeName = formatter.of(localeCode);
+
+        return nativeName
+            ? nativeName.charAt(0).toUpperCase() + nativeName.slice(1)
+            : localeCode.toUpperCase();
+    } catch (e) {
+        return localeCode.toUpperCase();
+    }
+}
+---
+
+<div class:list={[classes.root]} {...rest}>
+    {Astro.slots.has("label") && (
+            <label for="language-picker" class:list={[classes.label]}>
+                <slot name="label" />
+            </label>
+    )}
+
+    <div class:list={[classes.wrapper]}>
+        <select
+                id="language-picker"
+                class:list={[classes.select]}
+                aria-label="Select language"
+                data-variant={variant}
+                data-size={size}
+        >
+            {processedLocales.map((item) => {
+                const targetUrl = getRelativeLocaleUrl(item.code, Astro.url.pathname.replace(/^\/[^/]+/, ''));
+                return (
+                        <option
+                                value={targetUrl}
+                                selected={currentLocale === item.code}
+                                class:list={[classes.option]}
+                        >
+                            {item.label !== item.code ? item.label : getLocaleDisplayName(item.code)}
+                        </option>
+                );
+            })}
+        </select>
+
+        <div class:list={[classes.iconWrapper]}>
+            <slot name="icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 opacity-70">
+                    <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+                </svg>
+            </slot>
+        </div>
+    </div>
+</div>
+
+<script>
+    const initializeLanguagePicker = () => {
+        const languagePickers = document.querySelectorAll('#language-picker');
+
+        languagePickers.forEach(picker => {
+            if (picker.hasAttribute('data-initialized')) return;
+            picker.setAttribute('data-initialized', 'true');
+
+            picker.addEventListener('change', (event) => {
+                const target = event.target as HTMLSelectElement;
+                const targetUrl = target.value;
+                if (targetUrl) {
+                    window.location.href = targetUrl;
+                }
+            });
+        });
+    };
+
+    document.addEventListener('DOMContentLoaded', initializeLanguagePicker);
+    document.addEventListener('astro:page-load', initializeLanguagePicker);
+</script>

package/src/components/astro/RLAMarquee.astro

@@ -0,0 +1,32 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { MarqueeProps } from "../../types"
+import marqueeTheme from "../../themes/marquee.theme"
+
+const marquee = scv(marqueeTheme)
+
+const {
+  direction = "left",
+  speed = 40,
+  pauseOnHover = true,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as MarqueeProps
+
+const classes = resolveClasses(marquee, {
+  direction,
+  pauseOnHover
+}, useUi("marquee", uiProp), className)
+
+const duration = `${speed}s`
+---
+<div class={classes.root} data-slot="marquee-root" {...rest}>
+  <div class={classes.track} data-slot="track" style={{ animationDuration: duration }}>
+    <slot />
+  </div>
+  <div class={classes.track} data-slot="track" aria-hidden="true" style={{ animationDuration: duration }}>
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLANativeSelect.astro

@@ -0,0 +1,51 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { NativeSelectProps } from "../../types"
+import nativeSelectThemeDefault, { createNativeSelectTheme } from "../../themes/nativeSelect.theme"
+
+const nativeSelectTheme = nativeSelectThemeDefault
+const nativeSelect = scv(nativeSelectTheme)
+
+const {
+  items = [],
+  value = "",
+  disabled = false,
+  name,
+  label,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as NativeSelectProps
+
+const classes = resolveClasses(nativeSelect, {
+  size
+}, useUi("nativeSelect", uiProp), className);
+
+const normalizedItems = items.map(item => {
+  if (typeof item === "string") {
+    return { label: item, value: item }
+  }
+  return item
+})
+---
+<div class={classes.root} data-slot="root">
+  {label && <label class={classes.label} data-slot="label">{label}</label>}
+  <div class="relative w-full">
+    <select
+      class={classes.select}
+      disabled={disabled}
+      name={name}
+      {...rest}
+    >
+      {normalizedItems.map(item => (
+        <option value={item.value} selected={item.value === value}>
+          {item.label}
+        </option>
+      ))}
+    </select>
+    <span class={classes.icon + " i-lucide-chevron-down"} />
+  </div>
+</div>

package/src/components/astro/RLANavigationMenu.astro

@@ -0,0 +1,136 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { NavigationMenuProps } from "../../types"
+import navigationMenuThemeDefault, { createNavigationMenuTheme } from "../../themes/navigationMenu.theme"
+
+const navigationMenuTheme = navigationMenuThemeDefault
+const navigationMenu = scv(navigationMenuTheme)
+
+const {
+  items = [],
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as NavigationMenuProps
+
+const classes = resolveClasses(navigationMenu, {}, useUi("navigationMenu", uiProp), className)
+---
+
+<nav class={classes.root} data-slot="root" data-nav-menu {...rest}>
+  <ul class={classes.list} data-slot="list" role="list">
+    {items.map((item, i) => {
+      const hasChildren = item.children && item.children.length > 0
+      return (
+        <li class={classes.item} data-slot="item" data-nav-item>
+          {hasChildren ? (
+            <button
+              type="button"
+              class={classes.trigger}
+              data-slot="trigger"
+              data-nav-trigger
+              aria-expanded="false"
+              aria-haspopup="true"
+            >
+              {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
+              {item.label}
+              <span class="i-lucide-chevron-down ml-1 size-3.5 transition-transform duration-200" aria-hidden="true" />
+            </button>
+          ) : (
+            <a
+              href={item.href ?? "#"}
+              class={classes.link}
+              data-slot="link"
+            >
+              {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
+              {item.label}
+            </a>
+          )}
+
+          {hasChildren && (
+            <div class={classes.content + " hidden"} data-slot="content" data-nav-content role="region">
+              <ul role="list" class="py-1">
+                {item.children!.map(child => (
+                  <li>
+                    <a
+                      href={child.href ?? "#"}
+                      class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+                    >
+                      {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted-foreground"} />}
+                      <div>
+                        <div class="font-medium leading-none">{child.label}</div>
+                        {child.description && (
+                          <p class="mt-1 text-xs text-muted-foreground line-clamp-2">{child.description}</p>
+                        )}
+                      </div>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </li>
+      )
+    })}
+  </ul>
+
+  <slot />
+
+  <div class={classes.viewport} data-slot="viewport" />
+</nav>
+
+<script>
+  document.querySelectorAll("[data-nav-menu]").forEach(menu => {
+    const items = menu.querySelectorAll("[data-nav-item]");
+
+    items.forEach(item => {
+      const trigger = item.querySelector("[data-nav-trigger]");
+      const content = item.querySelector("[data-nav-content]");
+
+      if (!trigger || !content) return;
+
+      const open = () => {
+        content.classList.remove("hidden");
+        trigger.setAttribute("aria-expanded", "true");
+        const icon = trigger.querySelector(".i-lucide-chevron-down");
+        if (icon) (icon as HTMLElement).style.transform = "rotate(180deg)";
+      };
+
+      const close = () => {
+        content.classList.add("hidden");
+        trigger.setAttribute("aria-expanded", "false");
+        const icon = trigger.querySelector(".i-lucide-chevron-down");
+        if (icon) (icon as HTMLElement).style.transform = "";
+      };
+
+      trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const isOpen = !content.classList.contains("hidden");
+        // Close all others
+        items.forEach(other => {
+          const otherContent = other.querySelector("[data-nav-content]");
+          const otherTrigger = other.querySelector("[data-nav-trigger]");
+          if (otherContent && !otherContent.classList.contains("hidden")) {
+            otherContent.classList.add("hidden");
+            otherTrigger?.setAttribute("aria-expanded", "false");
+            const icon = otherTrigger?.querySelector(".i-lucide-chevron-down");
+            if (icon) (icon as HTMLElement).style.transform = "";
+          }
+        });
+        if (!isOpen) open();
+      });
+    });
+
+    document.addEventListener("click", () => {
+      items.forEach(item => {
+        const content = item.querySelector("[data-nav-content]");
+        const trigger = item.querySelector("[data-nav-trigger]");
+        if (content) content.classList.add("hidden");
+        if (trigger) trigger.setAttribute("aria-expanded", "false");
+        const icon = trigger?.querySelector(".i-lucide-chevron-down");
+        if (icon) (icon as HTMLElement).style.transform = "";
+      });
+    });
+  });
+</script>

package/src/components/astro/RLAPagination.astro

@@ -0,0 +1,94 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PaginationProps } from "../../types"
+import paginationTheme from "../../themes/pagination.theme"
+
+const pagination = scv(paginationTheme)
+
+const {
+  currentPage = 1,
+  totalPages = 1,
+  baseUrl = "?page=",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PaginationProps
+
+const classes = resolveClasses(pagination, {}, useUi("pagination", uiProp), className)
+
+const getPageNumbers = () => {
+  const pages: (number | "ellipsis")[] = []
+  const maxVisible = 5
+  if (totalPages <= maxVisible) {
+    for (let i = 1; i <= totalPages; i++) pages.push(i)
+  } else {
+    pages.push(1)
+    if (currentPage > 3) pages.push("ellipsis")
+    const start = Math.max(2, currentPage - 1)
+    const end = Math.min(totalPages - 1, currentPage + 1)
+    for (let i = start; i <= end; i++) {
+      if (!pages.includes(i)) pages.push(i)
+    }
+    if (currentPage < totalPages - 2) pages.push("ellipsis")
+    if (!pages.includes(totalPages)) pages.push(totalPages)
+  }
+  return pages
+}
+
+const pages = getPageNumbers()
+---
+<nav class={classes.root} data-slot="pagination-root" aria-label="pagination" {...rest}>
+  <ul class={classes.list} data-slot="list">
+    <li class={classes.item}>
+      <a
+        href={currentPage > 1 ? `${baseUrl}${currentPage - 1}` : undefined}
+        class={classes.link}
+        aria-label="Go to previous page"
+        aria-disabled={currentPage === 1}
+        style={currentPage === 1 ? "pointer-events: none; opacity: 0.5;" : ""}
+      >
+        <span class="i-lucide-chevron-left size-4" aria-hidden="true" />
+      </a>
+    </li>
+
+    {pages.map((p) => {
+      if (p === "ellipsis") {
+        return (
+          <li class={classes.item}>
+            <span class={classes.ellipsis} aria-hidden="true">
+              &hellip;
+            </span>
+          </li>
+        )
+      }
+
+      const isActive = p === currentPage
+      const itemClasses = resolveClasses(pagination, { active: isActive }, useUi("pagination", uiProp))
+
+      return (
+        <li class={classes.item}>
+          <a
+            href={`${baseUrl}${p}`}
+            class={itemClasses.link}
+            aria-current={isActive ? "page" : undefined}
+          >
+            {p}
+          </a>
+        </li>
+      )
+    })}
+
+    <li class={classes.item}>
+      <a
+        href={currentPage < totalPages ? `${baseUrl}${currentPage + 1}` : undefined}
+        class={classes.link}
+        aria-label="Go to next page"
+        aria-disabled={currentPage === totalPages}
+        style={currentPage === totalPages ? "pointer-events: none; opacity: 0.5;" : ""}
+      >
+        <span class="i-lucide-chevron-right size-4" aria-hidden="true" />
+      </a>
+    </li>
+  </ul>
+</nav>

package/src/components/astro/RLAPopover.astro

@@ -0,0 +1,31 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PopoverProps } from "../../types"
+import popoverTheme from "../../themes/popover.theme"
+
+const popover = scv(popoverTheme)
+
+const {
+  triggerLabel,
+  placement = "bottom",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PopoverProps
+
+const classes = resolveClasses(popover, {
+  placement
+}, useUi("popover", uiProp), className)
+---
+<div class={classes.root} data-slot="popover-container" {...rest}>
+  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+    <slot name="trigger">
+      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
+    </slot>
+  </div>
+
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAProgress.astro

@@ -0,0 +1,43 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ProgressProps } from "../../types"
+import progressThemeDefault, { createProgressTheme } from "../../themes/progress.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const progressTheme = uiConfig.colors ? createProgressTheme(uiConfig.colors) : progressThemeDefault
+const progress = scv(progressTheme)
+
+const {
+  value = 0,
+  max = 100,
+  color = "primary",
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ProgressProps
+
+const classes = resolveClasses(progress, {
+  color,
+  size
+}, useUi("progress", uiProp), className)
+
+const percentage = Math.min(100, Math.max(0, (value / max) * 100))
+---
+<div
+  class={classes.root}
+  data-slot="progress-root"
+  role="progressbar"
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  {...rest}
+>
+  <div
+    class={classes.indicator}
+    data-slot="indicator"
+    style={{ transform: `translateX(-${100 - percentage}%)` }}
+  />
+</div>

package/src/components/astro/RLAResizable.astro

@@ -0,0 +1,177 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ResizableProps } from "../../types"
+import resizableThemeDefault, { createResizableTheme } from "../../themes/resizable.theme"
+
+const resizableTheme = resizableThemeDefault
+const resizable = scv(resizableTheme)
+
+const {
+  direction = "horizontal",
+  defaultSizes = [50, 50],
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ResizableProps
+
+const classes = resolveClasses(resizable, {
+  direction
+}, useUi("resizable", uiProp), className)
+
+// Normalise sizes so they sum to 100
+const total = defaultSizes.reduce((s, v) => s + v, 0)
+const sizes = defaultSizes.map(s => (s / (total || 100)) * 100)
+
+const panelCount = sizes.length
+---
+
+<div
+  class={classes.root}
+  data-slot="root"
+  data-resizable
+  data-direction={direction}
+  {...rest}
+>
+  {sizes.map((size, i) => (
+    <>
+      <div
+        class={classes.panel}
+        data-slot="panel"
+        data-resizable-panel={i}
+        style={direction === "horizontal" ? `width:${size}%` : `height:${size}%`}
+      >
+        <slot name={`panel-${i}`}>
+          {i === 0
+            ? <slot />
+            : <slot name="panel" />
+          }
+        </slot>
+      </div>
+
+      {/* Render a handle between panels, not after the last one */}
+      {i < panelCount - 1 && (
+        <div
+          class={classes.handle}
+          data-slot="handle"
+          data-resizable-handle={i}
+          role="separator"
+          aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
+          tabindex={0}
+          aria-label="Resize panels"
+        >
+          <span
+            class={
+              direction === "horizontal"
+                ? "i-lucide-grip-vertical size-3.5 text-muted-foreground/50"
+                : "i-lucide-grip-horizontal size-3.5 text-muted-foreground/50"
+            }
+            aria-hidden="true"
+          />
+        </div>
+      )}
+    </>
+  ))}
+</div>
+
+<script>
+  document.querySelectorAll("[data-resizable]").forEach(container => {
+    const direction = (container as HTMLElement).dataset.direction ?? "horizontal";
+    const isHorizontal = direction === "horizontal";
+
+    const panels = Array.from(
+      container.querySelectorAll("[data-resizable-panel]")
+    ) as HTMLElement[];
+
+    const handles = Array.from(
+      container.querySelectorAll("[data-resizable-handle]")
+    ) as HTMLElement[];
+
+    handles.forEach((handle, idx) => {
+      const panelA = panels[idx];
+      const panelB = panels[idx + 1];
+      if (!panelA || !panelB) return;
+
+      const containerSize = () =>
+        isHorizontal
+          ? (container as HTMLElement).clientWidth
+          : (container as HTMLElement).clientHeight;
+
+      let isDragging = false;
+      let startPos = 0;
+      let startASize = 0;
+      let startBSize = 0;
+
+      const getSize = (el: HTMLElement) =>
+        isHorizontal ? el.offsetWidth : el.offsetHeight;
+
+      const setSize = (el: HTMLElement, px: number) => {
+        const pct = (px / containerSize()) * 100;
+        if (isHorizontal) {
+          el.style.width = `${pct}%`;
+        } else {
+          el.style.height = `${pct}%`;
+        }
+      };
+
+      const onMouseMove = (e: MouseEvent) => {
+        if (!isDragging) return;
+        const delta = isHorizontal
+          ? e.clientX - startPos
+          : e.clientY - startPos;
+
+        const newASize = Math.max(48, startASize + delta);
+        const newBSize = Math.max(48, startBSize - delta);
+
+        // Only resize if both panels have enough space
+        if (startASize + startBSize - newASize < 48) return;
+
+        setSize(panelA, newASize);
+        setSize(panelB, newBSize);
+      };
+
+      const onMouseUp = () => {
+        isDragging = false;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        handle.classList.remove("bg-primary/30");
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+
+      handle.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        isDragging = true;
+        startPos = isHorizontal ? e.clientX : e.clientY;
+        startASize = getSize(panelA);
+        startBSize = getSize(panelB);
+        document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
+        handle.classList.add("bg-primary/30");
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      });
+
+      // Keyboard resize: arrow keys shift by 2%
+      handle.addEventListener("keydown", (e) => {
+        const step = containerSize() * 0.02;
+        const forward = isHorizontal
+          ? e.key === "ArrowRight"
+          : e.key === "ArrowDown";
+        const backward = isHorizontal
+          ? e.key === "ArrowLeft"
+          : e.key === "ArrowUp";
+
+        if (!forward && !backward) return;
+        e.preventDefault();
+
+        const aSize = getSize(panelA);
+        const bSize = getSize(panelB);
+        const delta = forward ? step : -step;
+
+        setSize(panelA, Math.max(48, aSize + delta));
+        setSize(panelB, Math.max(48, bSize - delta));
+      });
+    });
+  });
+</script>