@rimelight/ui 0.0.37 → 0.0.39

package/src/components/hover-card/hover-card.theme.ts

@@ -0,0 +1,29 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createHoverCardTheme = (_colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root", "trigger", "content"],
+    base: {
+      root: "relative inline-block group/hover-card",
+      trigger: "",
+      content: [
+        "absolute z-50 w-80 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-md outline-none",
+        "transition-all duration-200 invisible opacity-0 scale-95 origin-center pointer-events-none",
+        "group-hover/hover-card:visible group-hover/hover-card:opacity-100 group-hover/hover-card:scale-100 group-hover/hover-card:pointer-events-auto"
+      ]
+    },
+    variants: {
+      placement: {
+        top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
+        bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
+        left: { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
+        right: { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
+      }
+    },
+    defaultVariants: {
+      placement: "bottom"
+    }
+  })
+
+export default createHoverCardTheme()

package/src/components/icon/RLAIcon.astro

@@ -0,0 +1,36 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import { resolveIcon } from "./resolver"
+import type { IconProps } from "./icon"
+import iconTheme from "./icon.theme"
+
+
+const icon = scv(iconTheme)
+
+const {
+  name,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as IconProps
+
+const classes = resolveClasses(icon, { size }, useUi("icon", uiProp), className)
+const resolved = resolveIcon(name)
+---
+
+<span
+  class={classes.root}
+  data-slot="icon"
+  aria-hidden="true"
+  {...rest}
+>
+  {resolved.isClass ? (
+    <span class={resolved.content} />
+  ) : (
+    <Fragment set:html={resolved.content} />
+  )}
+</span>
+

package/src/components/icon/RLSIcon.tsx

@@ -0,0 +1,28 @@
+import { createMemo, splitProps, type Component } from "solid-js"
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import { resolveIcon } from "./resolver"
+import type { IconProps } from "./icon"
+import iconThemeDefault from "./icon.theme"
+
+const iconScv = scv(iconThemeDefault)
+
+const RLSIcon: Component<IconProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["name", "size", "ui", "class"])
+  const resolved = createMemo(() => resolveIcon(props.name))
+  const classes = createMemo(() =>
+    resolveClasses(iconScv, { size: props.size ?? "md" }, useUi("icon", props.ui), props.class)
+  )
+  return (
+    <span class={classes().root} data-slot="icon" aria-hidden="true" {...rest}>
+      {resolved().isClass ? (
+        <span class={resolved().content} />
+      ) : (
+        <span innerHTML={resolved().content} />
+      )}
+    </span>
+  )
+}
+
+export default RLSIcon

package/src/components/icon/RLVIcon.vue

@@ -0,0 +1,31 @@
+<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 { resolveIcon } from "./resolver"
+import type { IconProps } from "./icon"
+import iconThemeDefault from "./icon.theme"
+
+defineOptions({ name: "RLVIcon" })
+
+const attrs = useAttrs()
+const iconScv = scv(iconThemeDefault)
+
+const props = withDefaults(defineProps<IconProps>(), {
+  size: "md"
+})
+
+const resolvedClasses = computed(() =>
+  resolveClasses(iconScv, { size: props.size }, useUi("icon", props.ui), props.class)
+)
+
+const resolved = computed(() => resolveIcon(props.name))
+</script>
+
+<template>
+  <span v-bind="attrs" :class="resolvedClasses.root" data-slot="icon" aria-hidden="true">
+    <span v-if="resolved.isClass" :class="resolved.content" />
+    <span v-else v-html="resolved.content" />
+  </span>
+</template>

package/src/components/icon/icon.theme.ts

@@ -0,0 +1,30 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createIconTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: [
+        "shrink-0",
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "align-middle",
+        "leading-none"
+      ]
+    },
+    variants: {
+      size: {
+        xs: { root: ["h-3", "w-3"] },
+        sm: { root: ["h-4", "w-4"] },
+        md: { root: ["h-5", "w-5"] },
+        lg: { root: ["h-6", "w-6"] },
+        xl: { root: ["h-8", "w-8"] }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createIconTheme()

package/src/components/icon/resolver.ts

@@ -0,0 +1,37 @@
+import { DEFAULT_ICONS } from "../../icons/defaults"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+export interface ResolvedIcon {
+  isClass: boolean
+  content: string
+}
+
+const defaultIconsLookup = DEFAULT_ICONS as Record<string, string>
+
+/**
+ * Resolves whether an icon is a CSS class or raw inline SVG string, falling back to DEFAULT_ICONS.
+ * Supports both static virtual config overrides and custom dynamic overrides (e.g. props).
+ */
+export function resolveIcon(iconKey?: string, customProp?: string): ResolvedIcon {
+  if (!iconKey) {
+    return { isClass: false, content: "" }
+  }
+  if (iconKey.startsWith("i-") || iconKey.includes(":")) {
+    return { isClass: true, content: iconKey }
+  }
+
+  let config: Record<string, any> = {}
+  try {
+    config = getUIConfig()
+  } catch {}
+
+  const resolved = customProp || config.icons?.[iconKey]
+
+  if (!resolved) {
+    return { isClass: false, content: defaultIconsLookup[iconKey] || "" }
+  }
+
+  const isClass =
+    typeof resolved === "string" && (resolved.startsWith("i-") || resolved.includes(":"))
+  return { isClass, content: resolved }
+}

package/src/components/image/RLAImage.astro

@@ -0,0 +1,271 @@
+---
+import { Image, Picture, getImage } from "astro:assets"
+import type { ImageMetadata } from "astro"
+import RLAIcon from "../icon/RLAIcon.astro"
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ImageProps } from "./image"
+import imageTheme from "./image.theme"
+
+
+const img = scv(imageTheme)
+
+const {
+  src,
+  mobileSrc,
+  desktopSrc,
+  breakpoint,
+  formats,
+  alt = "",
+  height,
+  width,
+  loading = "lazy",
+  fit = "cover",
+  metadata: preMetadata,
+  open,
+  ui: uiProp,
+  class: className,
+  metaSource = true,
+  metaFormat = true,
+  metaDimensions = true,
+  metaSize = true,
+  metaAlt = true,
+  metaDownload = true,
+  ...rest
+} = Astro.props as ImageProps
+
+const classes = resolveClasses(img, {}, useUi("image", uiProp), className)
+
+const isResponsive = !!(mobileSrc && desktopSrc)
+const isFormatFallback = !isResponsive && !!(formats && formats.length > 0)
+const breakpointVal = breakpoint ?? 768
+
+let mobileImg = null
+let desktopImg = null
+
+if (isResponsive) {
+  mobileImg = await getImage({
+    src: mobileSrc!,
+    format: "webp",
+  })
+  desktopImg = await getImage({
+    src: desktopSrc!,
+    format: "webp",
+  })
+}
+
+const activeSrc = isResponsive ? desktopSrc : src
+const isMetadata = typeof activeSrc !== "string" && activeSrc !== undefined
+const imgWidth = width ?? (isMetadata ? (activeSrc as any).width : undefined)
+const imgHeight = height ?? (isMetadata ? (activeSrc as any).height : undefined)
+const imgFormat = isMetadata ? (activeSrc as any).format : (preMetadata?.format ?? undefined)
+const rawName = activeSrc
+  ? (typeof activeSrc === "string" ? activeSrc.split("/").pop() || "image" : (activeSrc as any).src.split("/").pop() || "image")
+  : "image"
+const fileName = rawName.split("?")[0]
+const fileExtension = imgFormat?.toUpperCase() || (fileName.includes(".") ? fileName.split(".").pop()?.toUpperCase() : "IMG")
+const initialSize = preMetadata?.size ?? undefined
+---
+
+<rla-image {...rest}>
+  <div class={classes.root} data-slot="root">
+    <slot name="trigger">
+      <button
+        type="button"
+        class={classes.trigger}
+        data-image-trigger
+      >
+        {isResponsive && mobileImg && desktopImg ? (
+          <picture>
+            <source media={`(max-width: ${breakpointVal - 1}px)`} srcset={mobileImg.src} />
+            <source media={`(min-width: ${breakpointVal}px)`} srcset={desktopImg.src} />
+            <img src={desktopImg.src} alt={alt} loading={loading} class="w-full h-full object-cover rounded-lg" />
+          </picture>
+        ) : isFormatFallback ? (
+          typeof src === "string" ? (
+            <Picture src={src} formats={formats!} alt={alt} width={imgWidth ?? 800} height={imgHeight ?? 400} loading={loading} class="w-full h-full object-cover rounded-lg" />
+          ) : (
+            <Picture src={src as ImageMetadata} formats={formats!} alt={alt} width={imgWidth ?? 800} height={imgHeight ?? 400} loading={loading} class="w-full h-full object-cover rounded-lg" />
+          )
+        ) : (
+          typeof src === "string" ? (
+            <Image src={src} alt={alt} width={imgWidth ?? 800} height={imgHeight ?? 400} loading={loading} class={classes.triggerImage} />
+          ) : (
+            <Image src={src as ImageMetadata} alt={alt} width={imgWidth ?? 800} height={imgHeight ?? 400} loading={loading} class={classes.triggerImage} />
+          )
+        )}
+      </button>
+    </slot>
+
+    <dialog
+      class={classes.dialog}
+      data-image-dialog
+    >
+      <div class="flex flex-col bg-background text-foreground max-h-[90vh]">
+        <div class="flex-1 min-h-0 flex items-center justify-center p-4 overflow-hidden">
+          {isResponsive && mobileImg && desktopImg ? (
+            <picture class="max-w-full max-h-[65vh] flex items-center justify-center overflow-hidden">
+              <source media={`(max-width: ${breakpointVal - 1}px)`} srcset={mobileImg.src} />
+              <source media={`(min-width: ${breakpointVal}px)`} srcset={desktopImg.src} />
+              <img src={desktopImg.src} alt={alt} class={classes.image} data-modal-img />
+            </picture>
+          ) : (
+            <img
+              src={typeof src === "string" ? src : src!.src}
+              alt={alt}
+              class={classes.image}
+              data-modal-img
+            />
+          )}
+        </div>
+
+        <hr class="border-border mx-4 mb-3 shrink-0" />
+
+        <div class={classes.fileInfo}>
+          <div class="flex flex-col gap-xs text-sm">
+            {
+              metaSource && (
+                <div class="flex flex-row gap-xs items-center">
+                  <RLAIcon name="image" class="size-4 shrink-0 text-muted-foreground" />
+                  <span class="text-muted-foreground">Source:</span>
+                  <span class="text-dimmed truncate max-w-[40vw]">{fileName}</span>
+                </div>
+              )
+            }
+            {
+              metaFormat && (
+                <div class="flex flex-row gap-xs items-center">
+                  <RLAIcon name="fileQuestion" class="size-4 shrink-0 text-muted-foreground" />
+                  <span class="text-muted-foreground">Format:</span>
+                  <span class="text-dimmed" data-metadata-format>{fileExtension || "IMG"}</span>
+                </div>
+              )
+            }
+            {
+              metaDimensions && (
+                <div class="flex flex-row gap-xs items-center">
+                  <RLAIcon name="imageUpscale" class="size-4 shrink-0 text-muted-foreground" />
+                  <span class="text-muted-foreground">Dimensions:</span>
+                  <span class="text-dimmed">{(imgWidth || "?")} x {(imgHeight || "?")}</span>
+                </div>
+              )
+            }
+            {
+              metaSize && (
+                <div class="flex flex-row gap-xs items-center">
+                  <RLAIcon name="hardDrive" class="size-4 shrink-0 text-muted-foreground" />
+                  <span class="text-muted-foreground">Size:</span>
+                  <span class="text-dimmed" data-metadata-size>{initialSize !== undefined ? `${initialSize} bytes` : "fetching..."}</span>
+                </div>
+              )
+            }
+            {
+              metaAlt && (
+                <div class="flex flex-row gap-xs items-center">
+                  <RLAIcon name="alignLeft" class="size-4 shrink-0 text-muted-foreground" />
+                  <span class="text-muted-foreground">Alt:</span>
+                  <span class="text-dimmed truncate max-w-[30vw]" class:list={{ "italic opacity-50": !alt }}>{alt || "none"}</span>
+                </div>
+              )
+            }
+          </div>
+
+          {
+            metaDownload && (
+              <button
+                type="button"
+                class={classes.download}
+                data-image-download
+              >
+                <RLAIcon name="download" class="size-4 shrink-0" />
+                Download Original
+              </button>
+            )
+          }
+        </div>
+
+        <form method="dialog" class="absolute top-2 right-2">
+          <button
+            type="submit"
+            class={classes.closeButton}
+            aria-label="Close"
+          >
+            <RLAIcon name="close" class="size-4" />
+          </button>
+        </form>
+      </div>
+    </dialog>
+  </div>
+</rla-image>
+
+<script>
+  class RLAImage extends HTMLElement {
+    connectedCallback() {
+      this.style.display = 'contents';
+      const trigger = this.querySelector("[data-image-trigger]");
+      if (!trigger) return;
+
+      const dialog = this.querySelector("[data-image-dialog]") as HTMLDialogElement | null;
+      if (!dialog) return;
+
+      const sizeEl = this.querySelector("[data-metadata-size]");
+      const formatEl = this.querySelector("[data-metadata-format]");
+      let fetched = false;
+
+      trigger.addEventListener("click", () => {
+        if (!fetched) {
+          fetched = true;
+          const imgEl = dialog.querySelector("[data-modal-img]");
+          if (imgEl) {
+            const src = imgEl.getAttribute("src");
+            if (src) {
+              fetch(src).then(r => r.blob()).then(blob => {
+                if (sizeEl) sizeEl.textContent = (blob.size / 1024).toFixed(2) + " KB";
+                if (formatEl && blob.type) {
+                  const mime = blob.type.split("/").pop()?.toUpperCase();
+                  if (mime && mime !== "OCTET-STREAM") formatEl.textContent = mime;
+                }
+                return;
+              }).catch(() => { if (sizeEl) sizeEl.textContent = "unavailable"; });
+            }
+          }
+        }
+        dialog.showModal();
+      });
+
+      dialog.addEventListener("click", (e) => {
+        if (e.target === dialog) dialog.close();
+      });
+
+      const downloadBtn = dialog.querySelector("[data-image-download]");
+      if (downloadBtn) {
+        downloadBtn.addEventListener("click", async () => {
+          const img = dialog.querySelector("img");
+          const imgSrc = img?.getAttribute("src");
+          if (!imgSrc) return;
+          try {
+            const response = await fetch(imgSrc);
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            const triggerImg = trigger.querySelector("img");
+            const srcAttr = triggerImg ? triggerImg.getAttribute("src") || "" : "";
+            link.download = (srcAttr.split("/").pop() || "").split("?")[0] || `image-${Date.now()}`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(url);
+          } catch (err) {
+            console.error("Download failed", err);
+          }
+        });
+      }
+    }
+  }
+
+  if (!customElements.get('rla-image')) {
+    customElements.define('rla-image', RLAImage);
+  }
+</script>

package/src/components/image/image.theme.ts

@@ -0,0 +1,33 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createImageTheme = () =>
+  defineTheme({
+    slots: [
+      "root",
+      "trigger",
+      "triggerImage",
+      "dialog",
+      "image",
+      "fileInfo",
+      "download",
+      "closeButton"
+    ],
+    base: {
+      root: "relative inline-block group/image",
+      trigger:
+        "cursor-pointer overflow-hidden rounded-lg block hover:scale-[1.02] active:scale-95 transition-transform duration-300",
+      triggerImage: "",
+      dialog:
+        "backdrop:bg-black/60 max-w-[98vw] sm:max-w-[95vw] w-fit max-h-[90vh] rounded-xl p-0 overflow-hidden border-0 m-auto",
+      image: "object-contain max-w-full max-h-[65vh] rounded-lg",
+      fileInfo: "flex items-center justify-between gap-xl px-4 pb-4 shrink-0",
+      download:
+        "inline-flex items-center justify-center rounded-md font-medium transition-colors outline-none h-9 px-4 py-2 text-sm gap-2 text-primary-500 hover:bg-primary-500/10 active:bg-primary-500/10",
+      closeButton:
+        "inline-flex items-center justify-center size-8 rounded-full bg-background/80 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createImageTheme()

package/src/components/input/RLAInput.astro

@@ -0,0 +1,65 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { InputProps } from "./input"
+import inputTheme from "./input.theme"
+
+
+const input = scv(inputTheme)
+
+const {
+  type = "text",
+  value = "",
+  placeholder,
+  disabled = false,
+  readonly = false,
+  name,
+  required = false,
+  error = false,
+  leadingIcon,
+  trailingIcon,
+  variant = "default",
+  size = "md",
+  color = "primary",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputProps
+
+const hasLeading = !!leadingIcon || Astro.slots.has("leading")
+const hasTrailing = !!trailingIcon || Astro.slots.has("trailing")
+
+const classes = resolveClasses(input, {
+  variant,
+  size,
+  hasLeading,
+  hasTrailing,
+  error: !!error,
+  theme
+}, useUi("input", uiProp), className);
+---
+<div class={classes.root} data-slot="root">
+  {(leadingIcon || Astro.slots.has("leading")) && (
+    <span class={classes.leading} data-slot="leading">
+      {leadingIcon ? <span class={leadingIcon} /> : <slot name="leading" />}
+    </span>
+  )}
+  <input
+    type={type}
+    class={classes.input}
+    value={value}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    name={name}
+    required={required}
+    {...rest}
+  />
+  {(trailingIcon || Astro.slots.has("trailing")) && (
+    <span class={classes.trailing} data-slot="trailing">
+      {trailingIcon ? <span class={trailingIcon} /> : <slot name="trailing" />}
+    </span>
+  )}
+</div>

package/src/components/input/RLVInput.vue

@@ -0,0 +1,95 @@
+<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 { InputProps } from "./input"
+import inputTheme from "./input.theme"
+
+const input = scv(inputTheme)
+
+const props = withDefaults(defineProps<InputProps & { modelValue?: string | number }>(), {
+  type: "text",
+  size: "md",
+  color: "primary"
+})
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number): void
+  (e: "change", event: Event): void
+  (e: "input", event: Event): void
+  (e: "focus", event: FocusEvent): void
+  (e: "blur", event: FocusEvent): void
+}>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const value = computed({
+  get: () => props.modelValue ?? props.value ?? "",
+  set: (val) => emit("update:modelValue", val)
+})
+
+const isLeading = computed(() => !!(props.leadingIcon || slots.leading))
+const isTrailing = computed(() => !!(props.trailingIcon || slots.trailing))
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    input,
+    {
+      size: props.size,
+      color: props.color,
+      error: !!props.error,
+      disabled: props.disabled,
+      leading: isLeading.value,
+      trailing: isTrailing.value,
+      theme: props.theme
+    },
+    useUi("input", props.ui),
+    props.class
+  )
+)
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  value.value = target.value
+  emit("input", event)
+}
+
+function onChange(event: Event) {
+  emit("change", event)
+}
+</script>
+
+<template>
+  <div :class="resolvedClasses.root" data-slot="root">
+    <slot name="leading" :ui="resolvedClasses">
+      <span v-if="isLeading" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
+        <span :class="leadingIcon" aria-hidden="true" />
+      </span>
+    </slot>
+
+    <input
+      v-bind="attrs"
+      :type="type"
+      :name="name"
+      :value="value"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :required="required"
+      :class="resolvedClasses.input"
+      data-slot="input"
+      @input="onInput"
+      @change="onChange"
+      @focus="(e) => emit('focus', e)"
+      @blur="(e) => emit('blur', e)"
+    />
+
+    <slot name="trailing" :ui="resolvedClasses">
+      <span v-if="isTrailing" :class="resolvedClasses.trailingIcon" data-slot="trailing-icon">
+        <span :class="trailingIcon" aria-hidden="true" />
+      </span>
+    </slot>
+  </div>
+</template>