@rimelight/ui 0.0.33 → 0.0.34

package/src/components/astro/RLAHeader.astro

@@ -1,59 +1,66 @@
----
-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>
-
+---
+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}
+  {...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 && (
+  <style is:inline set:html={`
+    #${headerId} {
+      z-index: ${zIndex} !important;
+    }
+  `} />
+)}
+

package/src/components/astro/RLAImage.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from "astro:assets"
+import { Image, Picture, getImage } from "astro:assets"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { ImageProps, ImageMetadataInfo } from "../../types"
@@ -9,10 +9,14 @@ import { getUIConfig } from "virtual:rimelight-ui"
 const uiConfig = getUIConfig()
 const imageTheme = uiConfig.colors ? createImageTheme() : imageThemeDefault
 
-const imgc = scv(imageTheme)
+const img = scv(imageTheme)
 
 const {
   src,
+  mobileSrc,
+  desktopSrc,
+  breakpoint,
+  formats,
   alt = "",
   height,
   width,
@@ -31,13 +35,34 @@ const {
   ...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 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
@@ -50,7 +75,17 @@ const initialSize = preMetadata?.size ?? undefined
       class={classes.trigger}
       data-image-trigger
     >
-      <Image src={src} alt={alt} width={imgWidth ?? 800} height={imgHeight ?? 400} loading={loading} fit={fit} />
+      {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 ? (
+        <Picture src={src!} formats={formats!} alt={alt} width={imgWidth ?? 800} height={imgHeight ?? 400} loading={loading} class="w-full h-full object-cover rounded-lg" />
+      ) : (
+        <Image src={src!} alt={alt} width={imgWidth ?? 800} height={imgHeight ?? 400} loading={loading} fit={fit} />
+      )}
     </button>
   </slot>
 
@@ -60,12 +95,20 @@ const initialSize = preMetadata?.size ?? undefined
   >
     <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
-        />
+        {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" />
@@ -194,8 +237,7 @@ const initialSize = preMetadata?.size ?? undefined
           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
+          link.download = (srcAttr.split("/").pop() || "").split("?")[0] || `image-${Date.now()}`
           document.body.appendChild(link)
           link.click()
           document.body.removeChild(link)
@@ -206,4 +248,4 @@ const initialSize = preMetadata?.size ?? undefined
       })
     }
   }
-</script>
+</script>

package/src/components/astro/RLALink.astro

@@ -1,23 +1,22 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LinkProps } from "../../types"
-import linkThemeDefault, { createLinkTheme } from "../../themes/link.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const linkTheme = uiConfig.colors ? createLinkTheme() : linkThemeDefault
-
-const link = scv(linkTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LinkProps
-
-const classes = resolveClasses(link, {}, useUi("link", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import RLAButton from "./RLAButton.astro"
+import type { LinkProps } from "../../types"
+
+const {
+  to,
+  href,
+  variant = "link",
+  color = "neutral",
+  ...rest
+} = Astro.props as LinkProps
+
+const linkHref = href || (typeof to === 'string' ? to : undefined);
+---
+<RLAButton
+  variant={variant as any}
+  color={color as any}
+  href={linkHref}
+  {...rest}
+>
+  <slot />
+</RLAButton>

package/src/components/astro/RLALinkGroup.astro

@@ -5,6 +5,8 @@ import type { LinkGroupProps } from "../../types"
 import linkGroupThemeDefault, { createLinkGroupTheme } from "../../themes/link-group.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
+import RLALink from "./RLALink.astro"
+
 const uiConfig = getUIConfig()
 const linkGroupTheme = uiConfig.colors ? createLinkGroupTheme() : linkGroupThemeDefault
 
@@ -12,6 +14,11 @@ const linkGroup = scv(linkGroupTheme)
 
 const {
   title,
+  label,
+  leadingIcon,
+  trailingIcon,
+  href,
+  to,
   links = [],
   theme,
   ui: uiProp,
@@ -20,17 +27,72 @@ const {
 } = Astro.props as LinkGroupProps
 
 const classes = resolveClasses(linkGroup, { theme }, useUi("linkGroup", uiProp), className);
+
+const headingLabel = label || (typeof title === "object" ? title.label : (typeof title === "string" ? title : undefined));
+const headingLeadingIcon = leadingIcon || (typeof title === "object" ? title.leadingIcon : undefined);
+const headingTrailingIcon = trailingIcon || (typeof title === "object" ? title.trailingIcon : undefined);
+const headingHref = href || (typeof title === "object" ? title.href : undefined);
+const headingTo = to || (typeof title === "object" ? (title as any).to : undefined);
+
+const linksProp = links ?? [];
+const normalizedLinks = Array.isArray(linksProp) ? linksProp : [linksProp];
+
+// Prefix utility classes in classes.link with `!` to cleanly override conflicting text colors in RLAButton's base classes.
+// For default or light themes, do not force base text classes so RLAButton's own light/dark mode styles can adapt naturally.
+const isPinnedDark = theme === "flat" || theme === "dark";
+const overrideLinkClass = classes.link
+    ? classes.link
+        .split(" ")
+        .map(cls => {
+            if (!cls) return "";
+            if (cls.includes(":")) {
+                const parts = cls.split(":");
+                const state = parts.slice(0, -1).join(":");
+                const baseCls = parts[parts.length - 1];
+                return `${state}:!${baseCls}`;
+            }
+            if (cls.startsWith("text-") && !isPinnedDark) {
+                return cls;
+            }
+            return `!${cls}`;
+        })
+        .filter(Boolean)
+        .join(" ")
+    : "";
 ---
 <div class={classes.root} data-slot="root" {...rest}>
-  {title && <h4 class={classes.title} data-slot="title">{title}</h4>}
+  {headingLabel && (
+    <h4 class={classes.title} data-slot="title">
+      {headingHref || headingTo ? (
+        <a href={headingHref || (typeof headingTo === 'string' ? headingTo : undefined)} class="hover:underline flex items-center gap-1.5">
+          {headingLeadingIcon && <span class={headingLeadingIcon} />}
+          <span>{headingLabel}</span>
+          {headingTrailingIcon && <span class={headingTrailingIcon} />}
+        </a>
+      ) : (
+        <span class="flex items-center gap-1.5">
+          {headingLeadingIcon && <span class={headingLeadingIcon} />}
+          <span>{headingLabel}</span>
+          {headingTrailingIcon && <span class={headingTrailingIcon} />}
+        </span>
+      )}
+    </h4>
+  )}
   
   <ul class={classes.list} data-slot="list">
     <slot>
-      {links.map((link) => (
+      {normalizedLinks.map((link) => (
         <li class={classes.item} data-slot="item">
-          <a href={link.href} class={classes.link} data-slot="link" {...link}>
+          <RLALink
+            variant={link.variant ?? "ghost"}
+            color={link.color ?? "neutral"}
+            theme={link.theme ?? theme}
+            class:list={[overrideLinkClass, "w-full !justify-start"]}
+            data-slot="link"
+            {...link}
+          >
             {link.label}
-          </a>
+          </RLALink>
         </li>
       ))}
     </slot>

package/src/components/astro/RLALocaleSelector.astro

@@ -1,114 +1,137 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LocaleSelectorProps } from "../../types"
-import localeSelectorThemeDefault, { createLocaleSelectorTheme } from "../../themes/locale-selector.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n";
-
-const uiConfig = getUIConfig()
-const localeSelectorTheme = uiConfig.colors ? createLocaleSelectorTheme() : localeSelectorThemeDefault
-
-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);
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LocaleSelectorProps } from "../../types"
+import localeSelectorThemeDefault, { createLocaleSelectorTheme } from "../../themes/locale-selector.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n"
+import RLASelect from "./RLASelect.astro"
+
+const uiConfig = getUIConfig()
+const localeSelectorTheme = uiConfig.colors ? createLocaleSelectorTheme() : localeSelectorThemeDefault
+
+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 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();
+    }
+}
+
+const items = processedLocales.map((item) => {
+    const targetUrl = getRelativeLocaleUrl(item.code, Astro.url.pathname.replace(/^\/[^/]+/, ''));
+    return {
+        label: item.label !== item.code ? item.label : getLocaleDisplayName(item.code),
+        value: targetUrl,
+        code: item.code
+    };
+});
+
+const currentLocaleUrl = items.find(item => item.code === currentLocale)?.value || "";
+
+// Prefix utility classes in classes.select with `!` to cleanly override conflicting styles in RLASelect's base trigger
+// Also remove `pr-` classes which were meant for absolute positioned native select icons
+const overrideTriggerClass = classes.select
+    ? classes.select
+        .split(" ")
+        .map(cls => {
+            if (!cls) return "";
+            if (cls.startsWith("pr-") || cls.startsWith("!pr-")) return ""; // Strip padding-right
+            if (cls.includes(":")) {
+                const parts = cls.split(":");
+                const state = parts.slice(0, -1).join(":");
+                const baseCls = parts[parts.length - 1];
+                return `${state}:!${baseCls}`;
+            }
+            return `!${cls}`;
+        })
+        .filter(Boolean)
+        .join(" ")
+    : "";
+
+const gapClass = size === "sm" ? "gap-1.5" : size === "lg" ? "gap-3" : "gap-2";
+
+const isDefault = variant === "default";
+const triggerDarkModeOverrides = isDefault 
+    ? "dark:!bg-neutral-800 dark:!text-white dark:hover:!bg-neutral-700" 
+    : "";
+
+const selectUi = {
+    root: "!w-fit !inline-flex",
+    trigger: `flex items-center justify-between !w-fit ${gapClass} ${overrideTriggerClass} ${triggerDarkModeOverrides}`,
+    content: "!min-w-0 !w-full !bg-white !border-gray-200 !text-gray-800 dark:!bg-neutral-900 dark:!border-neutral-800 dark:!text-white",
+    item: "!text-gray-700 hover:!bg-gray-100 hover:!text-gray-900 dark:!text-neutral-300 dark:hover:!bg-neutral-800 dark:hover:!text-white"
+};
+---
+
+<div class:list={[classes.root]} data-locale-selector {...rest}>
+    {Astro.slots.has("label") && (
+            <label class:list={[classes.label]}>
+                <slot name="label" />
+            </label>
+    )}
+
+    <div class:list={[classes.wrapper]}>
+        <RLASelect
+            items={items}
+            value={currentLocaleUrl}
+            size={size}
+            ui={selectUi}
+        />
+    </div>
+</div>
+
+<script>
+    const initializeLocaleSelector = () => {
+        const selectors = document.querySelectorAll('[data-locale-selector]');
+
+        selectors.forEach(selector => {
+            if (selector.hasAttribute('data-initialized')) return;
+            selector.setAttribute('data-initialized', 'true');
+
+            const hiddenInput = selector.querySelector('[data-select-hidden-input]') as HTMLInputElement;
+            if (!hiddenInput) return;
+
+            hiddenInput.addEventListener('change', (event) => {
+                const target = event.target as HTMLInputElement;
+                const targetUrl = target.value;
+                if (targetUrl) {
+                    window.location.href = targetUrl;
+                }
+            });
+        });
+    };
+
+    document.addEventListener('DOMContentLoaded', initializeLocaleSelector);
+    document.addEventListener('astro:page-load', initializeLocaleSelector);
 </script>