@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLAImage.astro

@@ -1,274 +0,0 @@
----
-import { getImage } from "astro:assets"
-import type { ImageMetadata } from "astro"
-import Image from "astro/components/Image.astro"
-import Picture from "astro/components/Picture.astro"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ImageProps } 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 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">
-                  <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>
-</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/astro/RLAInput.astro

@@ -1,67 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { InputProps } from "../../types"
-import inputThemeDefault, { createInputTheme } from "../../themes/input.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const inputTheme = uiConfig.colors ? createInputTheme() : inputThemeDefault
-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/astro/RLAInputDate.astro

@@ -1,23 +0,0 @@
----
-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/RLAInputMenu.astro

@@ -1,167 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { InputMenuProps } from "../../types"
-import inputMenuThemeDefault, { createInputMenuTheme } from "../../themes/input-menu.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const inputMenuTheme = uiConfig.colors ? createInputMenuTheme() : inputMenuThemeDefault
-const inputMenu = scv(inputMenuTheme)
-
-const {
-  items = [],
-  value = "",
-  placeholder = "Select item...",
-  disabled = false,
-  name,
-  label,
-  size = "md",
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as InputMenuProps
-
-const classes = resolveClasses(inputMenu, {
-  size
-}, useUi("inputMenu", 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-input-menu {...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-inputMenu-wrapper>
-      <button
-        type="button"
-        class={classes.trigger}
-        data-slot="trigger"
-        disabled={disabled}
-        data-inputMenu-trigger
-      >
-        <span data-inputMenu-value>{initialLabel || placeholder}</span>
-        <span class="i-lucide-chevrons-up-down opacity-50" />
-      </button>
-
-      <div class={classes.content + " hidden"} data-inputMenu-dropdown data-slot="content">
-        <input
-          type="text"
-          class={classes.input}
-          placeholder="Search..."
-          data-inputMenu-search
-        />
-        <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-inputMenu-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-inputMenu-hidden-input />
-  </div>
-</rla-input-menu>
-
-<script>
-  class RLAInputMenu extends HTMLElement {
-    private inputMenuCleanup: (() => void) | null = null;
-
-    connectedCallback() {
-      this.style.display = 'contents';
-      const wrapper = this.querySelector("[data-inputMenu-wrapper]") as HTMLElement | null;
-      if (!wrapper) return;
-
-      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<HTMLElement>("[data-inputMenu-item]");
-      const valueSpan = wrapper.querySelector("[data-inputMenu-value]");
-      const hiddenInput = this.querySelector("[data-inputMenu-hidden-input]") as HTMLInputElement;
-
-      if (!trigger || !dropdown) return;
-
-      const onTriggerClick = (e: MouseEvent) => {
-        e.stopPropagation();
-        dropdown.classList.toggle("hidden");
-        if (!dropdown.classList.contains("hidden")) {
-          search?.focus();
-        }
-      };
-      trigger.addEventListener("click", onTriggerClick);
-
-      const onSearchInput = (e: Event) => {
-        const q = (e.target as HTMLInputElement).value.toLowerCase();
-        items.forEach(item => {
-          const label = (item as HTMLElement).dataset.label?.toLowerCase() || "";
-          if (label.includes(q)) {
-            (item as HTMLElement).classList.remove("hidden");
-          } else {
-            (item as HTMLElement).classList.add("hidden");
-          }
-        });
-      };
-      search?.addEventListener("input", onSearchInput);
-
-      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;
-          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.inputMenuCleanup = () => {
-        trigger.removeEventListener("click", onTriggerClick);
-        search?.removeEventListener("input", onSearchInput);
-        itemCleanups.forEach(fn => fn());
-        document.removeEventListener("click", onDocumentClick);
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.inputMenuCleanup) {
-        this.inputMenuCleanup();
-        this.inputMenuCleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-input-menu')) {
-    customElements.define('rla-input-menu', RLAInputMenu);
-  }
-</script>

package/src/components/astro/RLAInputNumber.astro

@@ -1,23 +0,0 @@
----
-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>

package/src/components/astro/RLAInputTags.astro

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

package/src/components/astro/RLAInputTime.astro

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

package/src/components/astro/RLAKbd.astro

@@ -1,32 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { KbdProps } from "../../types"
-import kbdThemeDefault, { createKbdTheme } from "../../themes/kbd.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const kbdTheme = uiConfig.colors ? createKbdTheme(uiConfig.colors) : kbdThemeDefault
-
-const kbd = scv(kbdTheme)
-
-const {
-  size = "md",
-  color = "neutral",
-  variant = "outline",
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as KbdProps & { color?: string; variant?: string; theme?: string }
-
-const classes = resolveClasses(kbd, {
-  size,
-  color: color as "neutral",
-  variant: variant as "solid",
-  theme: theme as "dark"
-}, useUi("kbd", uiProp), className)
----
-<kbd class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</kbd>

package/src/components/astro/RLAKnob.astro

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

package/src/components/astro/RLALabel.astro

@@ -1,27 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LabelProps } from "../../types"
-import labelThemeDefault, { createLabelTheme } from "../../themes/label.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const labelTheme = uiConfig.colors ? createLabelTheme() : labelThemeDefault
-
-const label = scv(labelTheme)
-
-const {
-  for: htmlFor,
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LabelProps
-
-const classes = resolveClasses(label, {
-  size
-}, useUi("label", uiProp), className)
----
-<label class={classes.root} data-slot="root" for={htmlFor} {...rest}>
-  <slot />
-</label>