@rimelight/ui 0.0.37 → 0.0.39

package/src/components/logo/RLALogo.astro

@@ -0,0 +1,116 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { LogoProps } from "./logo"
+import logoTheme from "./logo.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+
+const logo = scv(logoTheme)
+
+const {
+  variant = "logomark",
+  mode,
+  theme,
+  href = "/",
+  alt,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LogoProps;
+
+let resolvedHref = href;
+if (href === "/") {
+  try {
+    const { getRelativeLocaleUrl } = await import("astro:i18n");
+    resolvedHref = Astro.currentLocale
+      ? getRelativeLocaleUrl(Astro.currentLocale, "/")
+      : getRelativeLocaleUrl("/");
+  } catch {
+    if (Astro.currentLocale) {
+      resolvedHref = `/${Astro.currentLocale}/`;
+    }
+  }
+}
+
+const classes = resolveClasses(logo, {}, useUi("logo", uiProp), className);
+
+const globalConfig = getUIConfig();
+const rcLogos = globalConfig.logos as Record<string, any>;
+
+let logoSrc: string | null = null;
+let darkSrc: string | null = null;
+let lightSrc: string | null = null;
+
+const logoFiles = import.meta.glob<{ default: any }>("/src/assets/**/*.{svg,png,jpg,jpeg,webp,gif}", { eager: true });
+
+function resolveLogo(pathStr: string | null | undefined): any {
+  if (!pathStr) return null;
+  let lookupPath = pathStr;
+  if (lookupPath.startsWith("./")) {
+    lookupPath = lookupPath.substring(1);
+  } else if (!lookupPath.startsWith("/")) {
+    lookupPath = "/" + lookupPath;
+  }
+  const file = logoFiles[lookupPath];
+  if (file) {
+    return file.default?.src || file.default;
+  }
+  return pathStr;
+}
+
+if (rcLogos && typeof rcLogos === "object") {
+  let src = rcLogos[variant];
+  if (src && typeof src === "object") {
+    if (mode) {
+      logoSrc = resolveLogo(src[mode] || src.color);
+    } else {
+      logoSrc = resolveLogo(src.color || src.black || src.white);
+      darkSrc = resolveLogo(src.white || src.color);
+      lightSrc = resolveLogo(src.black || src.color);
+    }
+  } else if (typeof src === "string") {
+    logoSrc = resolveLogo(src);
+  }
+}
+
+const startsWithUrlPrefix = logoSrc && (logoSrc.startsWith("http") || logoSrc.startsWith("/") || logoSrc.startsWith("."));
+const isIcon = logoSrc && !startsWithUrlPrefix && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
+const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode;
+---
+
+<a
+  class={classes.root}
+  href={resolvedHref}
+  aria-label={alt || variant}
+  data-slot="root"
+  {...rest}
+>
+  {logoSrc ? (
+    isIcon ? (
+      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
+    ) : hasAutoMode ? (
+      <>
+        <img
+          src={lightSrc}
+          alt={alt || ""}
+          class="size-full block object-contain shrink-0 dark:hidden"
+        />
+        <img
+          src={darkSrc}
+          alt={alt || ""}
+          class="size-full hidden object-contain shrink-0 dark:block"
+        />
+      </>
+    ) : (
+      <img
+        src={logoSrc}
+        alt={alt || ""}
+        class="size-full block object-contain shrink-0"
+      />
+    )
+  ) : (
+    <slot />
+  )}
+</a>

package/src/components/logo/logo.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createLogoTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "flex items-center justify-center transition-opacity hover:opacity-80 shrink-0 select-none overflow-hidden"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createLogoTheme()

package/src/components/main/RLAMain.astro

@@ -0,0 +1,37 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { MainProps } from "./main"
+import mainTheme from "./main.theme"
+
+
+const main = scv(mainTheme)
+
+const {
+    as = "main",
+    ui: uiProp,
+    class: className,
+    ...rest
+} = Astro.props as MainProps;
+
+const classes = resolveClasses(main, {
+    hasContent: Astro.slots.has("default")
+}, useUi("main", uiProp), className);
+
+const Tag = as;
+---
+
+<Tag
+        class:list={[classes.root, "rla-main-container"]}
+        data-slot="main"
+        {...rest}
+    >
+    <slot />
+</Tag>
+
+<style>
+  .rla-main-container {
+    padding-top: var(--rl-total-header-height, 4rem);
+  }
+</style>

package/src/components/main/main.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createMainTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "min-h-[calc(100vh-var(--ui-header-height))]"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createMainTheme()

package/src/components/marquee/RLAMarquee.astro

@@ -0,0 +1,43 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { MarqueeProps } from "./marquee"
+import { resolveTheme } from "../../utils/resolveTheme"
+import marqueeThemeDefault, { createMarqueeTheme } from "./marquee.theme"
+const marqueeTheme = resolveTheme(marqueeThemeDefault, createMarqueeTheme)
+
+
+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`
+const id = `marquee-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="marquee-root" {...rest}>
+  <div class:list={[classes.track, id]} data-slot="track">
+    <slot />
+  </div>
+  <div class:list={[classes.track, id]} data-slot="track" aria-hidden="true">
+    <slot />
+  </div>
+</div>
+
+<style is:inline set:html={`
+  .${id} {
+    animation-duration: ${duration} !important;
+  }
+`} />

package/src/components/marquee/marquee.theme.ts

@@ -0,0 +1,29 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createMarqueeTheme = (_colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root", "track"],
+    base: {
+      root: "relative w-full overflow-hidden flex gap-4 mask-gradient-to-r",
+      track: "flex shrink-0 gap-4 min-w-full justify-around animate-marquee"
+    },
+    variants: {
+      direction: {
+        left: { track: "flex-row animate-marquee-left" },
+        right: { track: "flex-row animate-marquee-right" },
+        up: { root: "flex-col h-80", track: "flex-col animate-marquee-up" },
+        down: { root: "flex-col h-80", track: "flex-col animate-marquee-down" }
+      },
+      pauseOnHover: {
+        true: { track: "hover:[animation-play-state:paused]" },
+        false: { track: "" }
+      }
+    },
+    defaultVariants: {
+      direction: "left",
+      pauseOnHover: true
+    }
+  })
+
+export default createMarqueeTheme()

package/src/components/meter/RLAMeter.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { MeterProps } from "./meter"
+import meterTheme from "./meter.theme"
+
+
+const meter = scv(meterTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as MeterProps
+
+const classes = resolveClasses(meter, {}, useUi("meter", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/meter/meter.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createMeterTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createMeterTheme()

package/src/components/modal/RLAModal.astro

@@ -0,0 +1,183 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ModalProps } from "./modal"
+import { resolveTheme } from "../../utils/resolveTheme"
+import modalThemeDefault, { createModalTheme } from "./modal.theme"
+const modalTheme = resolveTheme(modalThemeDefault, createModalTheme)
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const modal = scv(modalTheme)
+
+const {
+  open = false,
+  triggerLabel,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  lockScroll = true,
+  title,
+  description,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  unmountOnHide = true,
+  ...rest
+} = Astro.props as ModalProps & { size?: "sm" | "md" | "lg" | "xl" }
+
+const classes = resolveClasses(modal, {
+  size
+}, useUi("modal", uiProp), className)
+
+const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="modal-container">
+  {triggerLabel ? (
+    <button
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      data-dialog-show={modalId}
+    >
+      {triggerLabel}
+    </button>
+  ) : (
+    <span data-dialog-show={modalId}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={modalId}
+    class={classes.content}
+    data-slot="content"
+    data-lock-scroll={lockScroll ? "true" : "false"}
+    data-close-on-escape={closeOnEscape ? "true" : "false"}
+    data-close-on-click-outside={closeOnClickOutside ? "true" : "false"}
+    data-unmount-on-hide={unmountOnHide ? "true" : "false"}
+    {...rest}
+  >
+    <button
+      class={classes.closeButton}
+      data-slot="close-button"
+      type="button"
+      data-dialog-close={modalId}
+      aria-label="Close modal"
+    >
+      <RLAIcon name="close" class="size-4" aria-hidden="true" />
+    </button>
+
+    <div class={classes.header} data-slot="header">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      <slot name="title" />
+      
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot name="description" />
+    </div>
+
+    <slot />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</div>
+
+<script>
+  if (!(window as any).rlaDialogListenerActive) {
+    (window as any).rlaDialogListenerActive = true;
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+
+      const showTrigger = target.closest('[data-dialog-show]');
+      if (showTrigger) {
+        const dialogId = showTrigger.getAttribute('data-dialog-show');
+        if (dialogId) {
+          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
+          if (dialog) {
+            // Restore content if it was unmounted/cleared
+            if (dialog.getAttribute('data-unmount-on-hide') === 'true' && (dialog as any).rlaSavedHtml) {
+              dialog.innerHTML = (dialog as any).rlaSavedHtml;
+            }
+            if (typeof dialog.showModal === 'function') {
+              dialog.showModal();
+            } else if (typeof (dialog as any).showmodal === 'function') {
+              (dialog as any).showmodal();
+            }
+          }
+        }
+      }
+
+      const closeTrigger = target.closest('[data-dialog-close]');
+      if (closeTrigger) {
+        const dialogId = closeTrigger.getAttribute('data-dialog-close');
+        if (dialogId) {
+          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
+          if (dialog) {
+            dialog.close();
+            // Clear content if unmountOnHide is true
+            if (dialog.getAttribute('data-unmount-on-hide') === 'true') {
+              if (!(dialog as any).rlaSavedHtml) {
+                (dialog as any).rlaSavedHtml = dialog.innerHTML;
+              }
+              // Keep only the close button to ensure it can be reopened/closed properly
+              const closeBtn = dialog.querySelector('[data-slot="close-button"]');
+              dialog.innerHTML = '';
+              if (closeBtn) {
+                dialog.appendChild(closeBtn);
+              }
+            }
+          }
+        }
+      }
+
+      if (target.tagName === 'DIALOG' && target.getAttribute('data-close-on-click-outside') === 'true') {
+        const rect = target.getBoundingClientRect();
+        const isInModal = (
+          rect.top <= e.clientY &&
+          e.clientY <= rect.top + rect.height &&
+          rect.left <= e.clientX &&
+          e.clientX <= rect.left + rect.width
+        );
+        if (!isInModal) {
+          const dialog = target as HTMLDialogElement;
+          dialog.close();
+          if (dialog.getAttribute('data-unmount-on-hide') === 'true') {
+            if (!(dialog as any).rlaSavedHtml) {
+              (dialog as any).rlaSavedHtml = dialog.innerHTML;
+            }
+            const closeBtn = dialog.querySelector('[data-slot="close-button"]');
+            dialog.innerHTML = '';
+            if (closeBtn) {
+              dialog.appendChild(closeBtn);
+            }
+          }
+        }
+      }
+    });
+
+    // Handle dialog escape key
+    document.addEventListener('cancel', (e) => {
+      const dialog = e.target as HTMLDialogElement | null;
+      if (dialog && dialog.tagName === 'DIALOG') {
+        if (dialog.getAttribute('data-unmount-on-hide') === 'true') {
+          if (!(dialog as any).rlaSavedHtml) {
+            (dialog as any).rlaSavedHtml = dialog.innerHTML;
+          }
+          const closeBtn = dialog.querySelector('[data-slot="close-button"]');
+          dialog.innerHTML = '';
+          if (closeBtn) {
+            dialog.appendChild(closeBtn);
+          }
+        }
+      }
+    });
+
+    // Save initial HTML for dialogs that unmount on hide
+    document.querySelectorAll('dialog[data-unmount-on-hide="true"]').forEach(dialog => {
+      (dialog as any).rlaSavedHtml = dialog.innerHTML;
+    });
+  }
+</script>

package/src/components/modal/RLVModal.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, useSlots, useAttrs } from "vue"
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ModalProps } from "./modal"
+import modalThemeDefault from "./modal.theme"
+import RLVIcon from "../icon/RLVIcon.vue"
+
+defineOptions({ name: "RLVModal" })
+
+const attrs = useAttrs()
+const slots = useSlots()
+const modalScv = scv(modalThemeDefault)
+
+const isOpen = defineModel<boolean>("open", { default: false })
+
+const props = withDefaults(
+  defineProps<
+    ModalProps & {
+      size?: "sm" | "md" | "lg" | "xl"
+    }
+  >(),
+  {
+    size: "md",
+    closeOnClickOutside: true,
+    closeOnEscape: true,
+    lockScroll: true,
+    unmountOnHide: true
+  }
+)
+
+const emit = defineEmits<{
+  "update:open": [value: boolean]
+  "close": []
+}>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(modalScv, { size: props.size }, useUi("modal", props.ui), props.class)
+)
+
+function handleClose() {
+  isOpen.value = false
+  emit("update:open", false)
+  emit("close")
+}
+</script>
+
+<template>
+  <div v-if="isOpen || !unmountOnHide" :class="resolvedClasses.root" data-slot="modal-container">
+    <div
+      v-if="isOpen"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
+      @click.self="closeOnClickOutside ? handleClose() : null"
+    >
+      <div
+        v-bind="attrs"
+        :class="resolvedClasses.content"
+        data-slot="content"
+        role="dialog"
+        aria-modal="true"
+      >
+        <button
+          type="button"
+          :class="resolvedClasses.closeButton"
+          data-slot="close-button"
+          aria-label="Close modal"
+          @click="handleClose"
+        >
+          <RLVIcon name="i-lucide-x" class="size-4" />
+        </button>
+
+        <div
+          v-if="title || description || slots.title || slots.description"
+          :class="resolvedClasses.header"
+          data-slot="header"
+        >
+          <h3 v-if="title" :class="resolvedClasses.title" data-slot="title">
+            {{ title }}
+          </h3>
+          <slot name="title" />
+
+          <p v-if="description" :class="resolvedClasses.description" data-slot="description">
+            {{ description }}
+          </p>
+          <slot name="description" />
+        </div>
+
+        <slot />
+
+        <div v-if="slots.footer" :class="resolvedClasses.footer" data-slot="footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/modal/modal.theme.ts

@@ -0,0 +1,49 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createModalTheme = (_colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: [
+      "root",
+      "trigger",
+      "backdrop",
+      "content",
+      "header",
+      "title",
+      "description",
+      "footer",
+      "closeButton"
+    ],
+    base: {
+      root: "relative inline-block",
+      trigger: "",
+      backdrop: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-all duration-300",
+      content: [
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border",
+        "bg-background p-6 shadow-xl transition-all duration-300 outline-none",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2"
+      ],
+      header: "flex flex-col gap-1.5 text-center sm:text-left mb-4",
+      title: "text-lg font-semibold leading-none tracking-tight text-foreground",
+      description: "text-sm text-muted-foreground leading-relaxed",
+      footer: "flex flex-col-reverse sm:flex-row sm:justify-end gap-2 mt-6",
+      closeButton: [
+        "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100",
+        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+      ]
+    },
+    variants: {
+      size: {
+        sm: { content: "max-w-sm" },
+        md: { content: "max-w-lg" },
+        lg: { content: "max-w-2xl" },
+        xl: { content: "max-w-4xl" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createModalTheme()

package/src/components/modal/modal.ts

@@ -0,0 +1,43 @@
+export interface ModalProps {
+  /**
+   * Controlled open state.
+   */
+  open?: boolean
+  /**
+   * The trigger label to render a default button.
+   */
+  triggerLabel?: string
+  /**
+   * Whether to close the dialog when clicking the backdrop.
+   */
+  closeOnClickOutside?: boolean
+  /**
+   * Whether to close on pressing the Escape key.
+   */
+  closeOnEscape?: boolean
+  /**
+   * Prevents body scrolling when open.
+   */
+  lockScroll?: boolean
+  /**
+   * Main heading of the dialog.
+   */
+  title?: string
+  /**
+   * Description of the dialog purpose.
+   */
+  description?: string
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  /**
+   * Keep content mounted in the DOM when hidden.
+   */
+  unmountOnHide?: boolean
+  [key: string]: unknown
+}