@rimelight/ui 0.0.31 → 0.0.33

package/src/components/astro/RLAHeader.astro

@@ -1,107 +1,59 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { HeaderProps } from "../../types"
-import headerTheme from "../../themes/header.theme"
-
-const header = scv(headerTheme)
-
-const {
-  contain = true,
-  sticky = true,
-  fixed = false,
-  stackIndex = 0,
-  hideOnScroll = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as HeaderProps;
-
-const classes = resolveClasses(header, {
-  contain,
-  sticky: fixed ? false : sticky,
-  fixed,
-}, useUi("header", uiProp), className);
-
-const headerId = `rla-header-${Math.random().toString(36).slice(2, 8)}`;
-const zIndex = 100 - stackIndex;
----
-
-<header
-  id={headerId}
-  data-slot="root"
-  class:list={[classes.root]}
-  data-rla-header={fixed ? "true" : undefined}
-  data-stack-index={stackIndex}
-  data-hide-on-scroll={String(hideOnScroll)}
-  style={fixed ? `z-index: ${zIndex};` : undefined}
-  {...rest}
->
-  <div class:list={[classes.content]} data-header-content>
-    <div class:list={[classes.container]}>
-      <div class:list={[classes.left]} data-slot="left">
-        <slot name="left" />
-      </div>
-      <div class:list={[classes.center]} data-slot="center">
-        <slot name="center" />
-      </div>
-      <div class:list={[classes.right]} data-slot="right">
-        <slot name="right" />
-      </div>
-    </div>
-  </div>
-</header>
-
-{fixed && (
-  <script>
-    import { getHeaderStack } from "../../utils/headerStack";
-
-    const stack = getHeaderStack();
-    const headers = document.querySelectorAll("[data-rla-header='true']");
-
-    headers.forEach(header => {
-      if ((header as any)._rl_initialized) return;
-      (header as any)._rl_initialized = true;
-
-      const id = header.id;
-      const stackIndex = parseInt(header.getAttribute("data-stack-index") || "0", 10);
-      const hideOnScroll = header.getAttribute("data-hide-on-scroll") === "true";
-      const contentEl = header.querySelector("[data-header-content]") as HTMLElement;
-
-      let naturalHeight = contentEl ? contentEl.offsetHeight : 0;
-      let isVisible = true;
-
-      const updateStack = () => {
-        stack.register(id, stackIndex, naturalHeight, isVisible, header as HTMLElement);
-      };
-
-      if (typeof ResizeObserver !== "undefined" && contentEl) {
-        new ResizeObserver(entries => {
-          const h = entries[0]?.contentRect.height;
-          if (h && h > 0) {
-            naturalHeight = h;
-            updateStack();
-          }
-        }).observe(contentEl);
-      }
-
-      if (hideOnScroll) {
-        let localLastScrollY = window.scrollY;
-        window.addEventListener("scroll", () => {
-          const current = window.scrollY;
-          const diff = current - localLastScrollY;
-          if (Math.abs(diff) >= 10) {
-            const newVisible = current <= 50 ? true : diff <= 0;
-            if (newVisible !== isVisible) {
-              isVisible = newVisible;
-              updateStack();
-            }
-            localLastScrollY = current;
-          }
-        }, { passive: true });
-      }
-
-      updateStack();
-    });
-  </script>
-)}
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { HeaderProps } from "../../types"
+import headerThemeDefault, { createHeaderTheme } from "../../themes/header.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const headerTheme = uiConfig.colors ? createHeaderTheme() : headerThemeDefault
+
+const header = scv(headerTheme)
+
+const {
+  contain = true,
+  sticky = true,
+  fixed = false,
+  stackIndex = 0,
+  hideOnScroll = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as HeaderProps;
+
+const classes = resolveClasses(header, {
+  contain,
+  sticky: fixed ? false : sticky,
+  fixed,
+}, useUi("header", uiProp), className);
+
+const headerId = `rla-header-${Math.random().toString(36).slice(2, 8)}`;
+const zIndex = 100 - stackIndex;
+---
+
+<header
+  id={headerId}
+  data-slot="root"
+  class:list={[classes.root]}
+  data-rla-header={fixed ? "true" : undefined}
+  data-stack-index={stackIndex}
+  data-hide-on-scroll={String(hideOnScroll)}
+  data-header-layer-id={headerId}
+  style={fixed ? `z-index: ${zIndex};` : undefined}
+  {...rest}
+>
+  <div class:list={[classes.content]} data-header-content>
+    <div class:list={[classes.container]}>
+      <div class:list={[classes.left]} data-slot="left">
+        <slot name="left" />
+      </div>
+      <div class:list={[classes.center]} data-slot="center">
+        <slot name="center" />
+      </div>
+      <div class:list={[classes.right]} data-slot="right">
+        <slot name="right" />
+      </div>
+    </div>
+  </div>
+</header>
+

package/src/components/astro/RLAHoverCard.astro

@@ -1,31 +1,35 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { HoverCardProps } from "../../types"
-import hoverCardTheme from "../../themes/hoverCard.theme"
-
-const hoverCard = scv(hoverCardTheme)
-
-const {
-  triggerLabel,
-  placement = "bottom",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as HoverCardProps
-
-const classes = resolveClasses(hoverCard, {
-  placement
-}, useUi("hoverCard", uiProp), className)
----
-<div class={classes.root} data-slot="hover-card-container" {...rest}>
-  <div class={classes.trigger} data-slot="trigger" tabindex="0">
-    <slot name="trigger">
-      {triggerLabel && <span class="cursor-help underline decoration-dotted">{triggerLabel}</span>}
-    </slot>
-  </div>
-
-  <div class={classes.content} data-slot="content">
-    <slot />
-  </div>
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { HoverCardProps } from "../../types"
+import hoverCardThemeDefault, { createHoverCardTheme } from "../../themes/hover-card.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const hoverCardTheme = uiConfig.colors ? createHoverCardTheme() : hoverCardThemeDefault
+
+const hoverCard = scv(hoverCardTheme)
+
+const {
+  triggerLabel,
+  placement = "bottom",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as HoverCardProps
+
+const classes = resolveClasses(hoverCard, {
+  placement
+}, useUi("hoverCard", uiProp), className)
+---
+<div class={classes.root} data-slot="hover-card-container" {...rest}>
+  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+    <slot name="trigger">
+      {triggerLabel && <span class="cursor-help underline decoration-dotted">{triggerLabel}</span>}
+    </slot>
+  </div>
+
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAIcon.astro

@@ -1,27 +1,31 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { IconProps } from "../../types"
-import iconTheme from "../../themes/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)
----
-
-<span
-  class={classes.root}
-  data-slot="root"
-  aria-hidden="true"
-  {...rest}
->
-  <span class={name} />
-</span>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { IconProps } from "../../types"
+import iconThemeDefault, { createIconTheme } from "../../themes/icon.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const iconTheme = uiConfig.colors ? createIconTheme() : iconThemeDefault
+
+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)
+---
+
+<span
+  class={classes.root}
+  data-slot="root"
+  aria-hidden="true"
+  {...rest}
+>
+  <span class={name} />
+</span>

package/src/components/astro/RLAImage.astro

@@ -0,0 +1,209 @@
+---
+import { Image } from "astro:assets"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ImageProps, ImageMetadataInfo } from "../../types"
+import imageThemeDefault, { createImageTheme } from "../../themes/image.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const imageTheme = uiConfig.colors ? createImageTheme() : imageThemeDefault
+
+const imgc = scv(imageTheme)
+
+const {
+  src,
+  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(imgc, {}, useUi("image", uiProp), className)
+
+const isMetadata = typeof src !== "string"
+const imgWidth = width ?? (isMetadata ? src.width : undefined)
+const imgHeight = height ?? (isMetadata ? src.height : undefined)
+const imgFormat = isMetadata ? src.format : (preMetadata?.format ?? undefined)
+const rawName = typeof src === "string" ? src.split("/").pop() || "image" : src.src.split("/").pop() || "image"
+const fileName = rawName.split("?")[0]
+const fileExtension = imgFormat?.toUpperCase() || (fileName.includes(".") ? fileName.split(".").pop()?.toUpperCase() : "IMG")
+const initialSize = preMetadata?.size ?? undefined
+---
+
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot name="trigger">
+    <button
+      type="button"
+      class={classes.trigger}
+      data-image-trigger
+    >
+      <Image src={src} alt={alt} width={imgWidth ?? 800} height={imgHeight ?? 400} loading={loading} fit={fit} />
+    </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">
+        <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">
+                <span class="i-lucide-image 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">
+                <span class="i-lucide-file-question-mark 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">
+                <span class="i-lucide-image-upscale 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">
+                <span class="i-lucide-hard-drive 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">
+                <span class="i-lucide-align-left 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
+            >
+              <span class="i-lucide-download 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"
+        >
+          <span class="i-lucide-x size-4" />
+        </button>
+      </form>
+    </div>
+  </dialog>
+</div>
+
+<script>
+  const triggers = document.querySelectorAll("[data-image-trigger]")
+  for (const trigger of triggers) {
+    const parent = trigger.closest(".group\\/image") || trigger.parentElement
+    const dialog = parent?.querySelector("[data-image-dialog]")
+    if (!dialog) continue
+
+    const sizeEl = parent?.querySelector("[data-metadata-size]")
+    const formatEl = parent?.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
+              }
+            }).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 srcAttr = (trigger.querySelector("img") || {}).getAttribute("src") || ""
+          const name = (srcAttr.split("/").pop() || "").split("?")[0] || `image-${Date.now()}`
+          link.download = name
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+          URL.revokeObjectURL(url)
+        } catch (err) {
+          console.error("Download failed", err)
+        }
+      })
+    }
+  }
+</script>

package/src/components/astro/RLAInput.astro

@@ -20,6 +20,7 @@ const {
   trailingIcon,
   size = "md",
   color = "primary",
+  theme,
   ui: uiProp,
   class: className,
   ...rest
@@ -32,7 +33,8 @@ const classes = resolveClasses(input, {
   size,
   hasLeading,
   hasTrailing,
-  error: !!error
+  error: !!error,
+  theme
 }, useUi("input", uiProp), className);
 ---
 <div class={classes.root} data-slot="root">

package/src/components/astro/RLAInputDate.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputDateProps } from "../../types"
+import inputDateThemeDefault, { createInputDateTheme } from "../../themes/input-date.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const inputDateTheme = uiConfig.colors ? createInputDateTheme() : inputDateThemeDefault
+
+const inputDate = scv(inputDateTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputDateProps
+
+const classes = resolveClasses(inputDate, {}, useUi("inputDate", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/{RLACombobox.astro → RLAInputMenu.astro}

@@ -1,11 +1,11 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComboboxProps } from "../../types"
-import comboboxThemeDefault, { createComboboxTheme } from "../../themes/combobox.theme"
+import type { InputMenuProps } from "../../types"
+import inputMenuThemeDefault, { createInputMenuTheme } from "../../themes/input-menu.theme"
 
-const comboboxTheme = comboboxThemeDefault
-const combobox = scv(comboboxTheme)
+const inputMenuTheme = inputMenuThemeDefault
+const inputMenu = scv(inputMenuTheme)
 
 const {
   items = [],
@@ -19,11 +19,11 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as ComboboxProps
+} = Astro.props as InputMenuProps
 
-const classes = resolveClasses(combobox, {
+const classes = resolveClasses(inputMenu, {
   size
-}, useUi("combobox", uiProp), className);
+}, useUi("inputMenu", uiProp), className);
 
 const normalizedItems = items.map(item => {
   if (typeof item === "string") {
@@ -38,34 +38,34 @@ const initialLabel = selectedItem ? selectedItem.label : ""
 <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-combobox-wrapper>
+  <div class="relative w-full" data-inputMenu-wrapper>
     <button
       type="button"
       class={classes.trigger}
       data-slot="trigger"
       disabled={disabled}
-      data-combobox-trigger
+      data-inputMenu-trigger
       {...rest}
     >
-      <span data-combobox-value>{initialLabel || placeholder}</span>
+      <span data-inputMenu-value>{initialLabel || placeholder}</span>
       <span class="i-lucide-chevrons-up-down opacity-50" />
     </button>
 
-    <div class={classes.content + " hidden"} data-combobox-dropdown data-slot="content">
+    <div class={classes.content + " hidden"} data-inputMenu-dropdown data-slot="content">
       <input
         type="text"
         class={classes.input}
         placeholder="Search..."
-        data-combobox-search
+        data-inputMenu-search
       />
-      <div class="py-1" data-combobox-items>
+      <div class="py-1" data-inputMenu-items>
         {normalizedItems.map(item => (
           <div
             class={classes.item}
             data-slot="item"
             data-value={item.value}
             data-label={item.label}
-            data-combobox-item
+            data-inputMenu-item
           >
             <span class={classes.itemText}>{item.label}</span>
             <span class={classes.itemIcon + " hidden i-lucide-check"} data-check-icon />
@@ -74,17 +74,17 @@ const initialLabel = selectedItem ? selectedItem.label : ""
       </div>
     </div>
   </div>
-  <input type="hidden" name={name} value={value} data-combobox-hidden-input />
+  <input type="hidden" name={name} value={value} data-inputMenu-hidden-input />
 </div>
 
 <script>
-  document.querySelectorAll("[data-combobox-wrapper]").forEach(wrapper => {
-    const trigger = wrapper.querySelector("[data-combobox-trigger]") as HTMLButtonElement;
-    const dropdown = wrapper.querySelector("[data-combobox-dropdown]") as HTMLDivElement;
-    const search = wrapper.querySelector("[data-combobox-search]") as HTMLInputElement;
-    const items = wrapper.querySelectorAll("[data-combobox-item]");
-    const valueSpan = wrapper.querySelector("[data-combobox-value]");
-    const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-combobox-hidden-input]") as HTMLInputElement;
+  document.querySelectorAll("[data-inputMenu-wrapper]").forEach(wrapper => {
+    const trigger = wrapper.querySelector("[data-inputMenu-trigger]") as HTMLButtonElement;
+    const dropdown = wrapper.querySelector("[data-inputMenu-dropdown]") as HTMLDivElement;
+    const search = wrapper.querySelector("[data-inputMenu-search]") as HTMLInputElement;
+    const items = wrapper.querySelectorAll("[data-inputMenu-item]");
+    const valueSpan = wrapper.querySelector("[data-inputMenu-value]");
+    const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-inputMenu-hidden-input]") as HTMLInputElement;
 
     if (!trigger || !dropdown) return;
 

package/src/components/astro/RLAInputNumber.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputNumberProps } from "../../types"
+import inputNumberThemeDefault, { createInputNumberTheme } from "../../themes/input-number.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const inputNumberTheme = uiConfig.colors ? createInputNumberTheme() : inputNumberThemeDefault
+
+const inputNumber = scv(inputNumberTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputNumberProps
+
+const classes = resolveClasses(inputNumber, {}, useUi("inputNumber", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>