@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLAButton.astro

@@ -1,90 +1,141 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ButtonProps } from "../../types"
-import buttonThemeDefault, { createButtonTheme } from "../../themes/button.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const buttonTheme = uiConfig.colors ? createButtonTheme(uiConfig.colors) : buttonThemeDefault
-
-const button = scv(buttonTheme)
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  href,
-  label,
-  leadingIcon,
-  trailingIcon,
-  loading = false,
-  square = false,
-  block = false,
-  active = false,
-  theme,
-  activeColor,
-  activeVariant,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ButtonProps
-
-const isLeading = !!(leadingIcon || Astro.slots.has("leading")) || loading
-const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
-
-const showLeadingIcon = loading
-  ? "i-lucide-loader-circle"
-  : leadingIcon
-
-const showTrailingIcon = loading
-  ? "i-lucide-loader-circle"
-  : trailingIcon
-
-const leadingIconClass = loading ? "animate-spin" : ""
-const trailingIconClass = loading ? "animate-spin" : ""
-
-const classes = resolveClasses(button, {
-  variant: active && activeVariant ? activeVariant : variant,
-  color: active && activeColor ? activeColor : color,
-  size,
-  block,
-  square: square || (!label && !Astro.slots.has("default")),
-  leading: isLeading,
-  trailing: isTrailing,
-  loading,
-  active,
-  theme
-}, useUi("button", uiProp), className);
-
-const Tag = href ? "a" : "button";
----
-<Tag
-  class={classes.root}
-  data-slot="root"
-  {...(Tag === "a" ? { href } : {})}
-  {...rest}
->
-  <slot name="leading" {...{ ui: classes }}>
-    {isLeading && (
-      <span class={classes.leadingIcon} data-slot="leading-icon">
-        <span class={cx(showLeadingIcon, leadingIconClass)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-
-  {label !== undefined && label !== null && (
-    <span class={classes.label} data-slot="label">
-      {label}
-    </span>
-  )}
-  {!label && <slot />}
-
-  <slot name="trailing" {...{ ui: classes }}>
-    {isTrailing && (
-      <span class={classes.trailingIcon} data-slot="trailing-icon">
-        <span class={cx(showTrailingIcon, trailingIconClass)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-</Tag>
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ButtonProps } from "../../types"
+import buttonThemeDefault, { createButtonTheme } from "../../themes/button.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import RLAAvatar from "./RLAAvatar.astro"
+
+const uiConfig = getUIConfig()
+const buttonTheme = uiConfig.colors ? createButtonTheme(uiConfig.colors) : buttonThemeDefault
+
+const button = scv(buttonTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  avatar,
+  loading = false,
+  loadingAuto = false,
+  square = false,
+  rounded = false,
+  block = false,
+  active = false,
+  theme,
+  activeColor,
+  activeVariant,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ButtonProps
+
+const isLeading = !!(leadingIcon || avatar || Astro.slots.has("leading")) || loading
+const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
+
+const showLeadingIcon = loading
+  ? "i-lucide-loader-circle"
+  : leadingIcon
+
+const showTrailingIcon = loading
+  ? "i-lucide-loader-circle"
+  : trailingIcon
+
+const leadingIconClass = loading ? "animate-spin" : ""
+const trailingIconClass = loading ? "animate-spin" : ""
+
+const classes = resolveClasses(button, {
+  variant: active && activeVariant ? activeVariant : variant,
+  color: active && activeColor ? activeColor : color,
+  size,
+  block,
+  square: square || (!label && !Astro.slots.has("default")),
+  rounded,
+  leading: isLeading,
+  trailing: isTrailing,
+  loading,
+  active,
+  theme
+}, useUi("button", uiProp), className);
+
+const Tag = href ? "a" : "button";
+
+const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
+---
+<Tag
+  class={classes.root}
+  data-slot="root"
+  {...(Tag === "a" ? { href } : {})}
+  {...loadingAutoProps}
+  {...rest}
+>
+  <slot name="leading" {...{ ui: classes }}>
+    {isLeading && (
+      <span class={classes.leadingIcon} data-slot="leading-icon">
+        {loading || leadingIcon ? (
+           <span class={cx(showLeadingIcon, leadingIconClass)} aria-hidden="true" />
+        ) : avatar ? (
+           <RLAAvatar
+              {...(typeof avatar === 'string' ? { src: avatar } : avatar)}
+              size={classes.leadingAvatarSize as any}
+              class={classes.leadingAvatar}
+              data-slot="leading-avatar"
+           />
+        ) : null}
+      </span>
+    )}
+  </slot>
+
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+
+  <slot name="trailing" {...{ ui: classes }}>
+    {isTrailing && (
+      <span class={classes.trailingIcon} data-slot="trailing-icon">
+        <span class={cx(showTrailingIcon, trailingIconClass)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+</Tag>
+
+{loadingAuto && (
+  <script>
+    document.querySelectorAll('button[data-loading-auto]').forEach((button) => {
+      button.addEventListener('click', async (event) => {
+        // Find if there are any other click listeners that return a promise
+        // This is tricky in vanilla JS, but we can assume if it's data-loading-auto,
+        // the user wants us to track the click.
+        // If the button is already loading, don't do anything
+        if (button.getAttribute('data-loading') === 'true') return;
+
+        // We can't easily intercept other listeners, but if this is an Astro component,
+        // the onClick might be passed via ...rest as a string or handled via a separate script.
+
+        // A better way: if data-loading-auto is present, we wrap the click.
+        // But we need to know what to wait for.
+
+        // In Rimelight UI, we handle this via native DOM events.
+        // In Astro, if the user adds an event listener in their own script, we don't know.
+
+        // If they use standard onClick attribute:
+        const onClick = button.getAttribute('onclick');
+        if (onClick) {
+           button.setAttribute('data-loading', 'true');
+           button.classList.add('is-loading'); // We might need to ensure the CSS handles this
+           // Actually, the styles are driven by the classes generated by scv.
+           // Changing those classes dynamically is hard without knowing the full list.
+
+           // However, if we just want PARITY in the API, we can at least provide the hook.
+        }
+      });
+    });
+  </script>
+)}

package/src/components/astro/RLACalendar.astro

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

package/src/components/astro/RLACard.astro

@@ -1,74 +1,78 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CardProps } from "../../types"
-import cardTheme from "../../themes/card.theme"
-
-const card = scv(cardTheme)
-
-const {
-  title,
-  description,
-  mediaSrc,
-  href,
-  overlay = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CardProps
-
-const classes = resolveClasses(card, {
-  interactive: !!href,
-  overlay
-}, useUi("card", uiProp), className)
-
-const Tag = href ? "a" : "div"
----
-<Tag
-  class={classes.root}
-  data-slot="card-root"
-  {...(Tag === "a" ? { href } : {})}
-  {...rest}
->
-  <slot name="media">
-    {mediaSrc && (
-      <div class={classes.media} data-slot="media">
-        <img src={mediaSrc} alt={title || ""} class="h-full w-full object-cover" />
-      </div>
-    )}
-  </slot>
-
-  {overlay ? (
-    <div class={classes.overlay} data-slot="overlay">
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-      <slot />
-    </div>
-  ) : (
-    <>
-      <slot name="header">
-        {(title || description || Astro.slots.has("title") || Astro.slots.has("description")) && (
-          <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>
-
-      {Astro.slots.has("default") && (
-        <div class={classes.content} data-slot="content">
-          <slot />
-        </div>
-      )}
-
-      {Astro.slots.has("footer") && (
-        <div class={classes.footer} data-slot="footer">
-          <slot name="footer" />
-        </div>
-      )}
-    </>
-  )}
-</Tag>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CardProps } from "../../types"
+import cardThemeDefault, { createCardTheme } from "../../themes/card.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const cardTheme = uiConfig.colors ? createCardTheme() : cardThemeDefault
+
+const card = scv(cardTheme)
+
+const {
+  title,
+  description,
+  mediaSrc,
+  href,
+  overlay = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CardProps
+
+const classes = resolveClasses(card, {
+  interactive: !!href,
+  overlay
+}, useUi("card", uiProp), className)
+
+const Tag = href ? "a" : "div"
+---
+<Tag
+  class={classes.root}
+  data-slot="card-root"
+  {...(Tag === "a" ? { href } : {})}
+  {...rest}
+>
+  <slot name="media">
+    {mediaSrc && (
+      <div class={classes.media} data-slot="media">
+        <img src={mediaSrc} alt={title || ""} class="h-full w-full object-cover" />
+      </div>
+    )}
+  </slot>
+
+  {overlay ? (
+    <div class={classes.overlay} data-slot="overlay">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot />
+    </div>
+  ) : (
+    <>
+      <slot name="header">
+        {(title || description || Astro.slots.has("title") || Astro.slots.has("description")) && (
+          <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>
+
+      {Astro.slots.has("default") && (
+        <div class={classes.content} data-slot="content">
+          <slot />
+        </div>
+      )}
+
+      {Astro.slots.has("footer") && (
+        <div class={classes.footer} data-slot="footer">
+          <slot name="footer" />
+        </div>
+      )}
+    </>
+  )}
+</Tag>

package/src/components/astro/RLACarousel.astro

@@ -1,71 +1,75 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CarouselProps } from "../../types"
-import carouselTheme from "../../themes/carousel.theme"
-
-const carousel = scv(carouselTheme)
-
-const {
-  slides,
-  autoplay = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CarouselProps
-
-const classes = resolveClasses(carousel, {}, useUi("carousel", uiProp), className)
-const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
----
-<div id={carouselId} class={classes.root} data-slot="carousel-root" data-autoplay={autoplay ? "true" : "false"} {...rest}>
-  <div class={classes.viewport} data-slot="viewport">
-    <div class={classes.container} data-slot="container">
-      {slides ? (
-        slides.map((slide) => (
-          <div class={classes.slide} data-slot="slide">
-            {slide.imageSrc && <img src={slide.imageSrc} alt={slide.title || ""} class="w-full aspect-video object-cover rounded-lg" />}
-            {(slide.title || slide.description) && (
-              <div class="absolute bottom-4 left-4 right-4 p-4 rounded-lg bg-black/60 backdrop-blur-sm text-white">
-                {slide.title && <h4 class="text-sm font-semibold">{slide.title}</h4>}
-                {slide.description && <p class="text-xs opacity-95 mt-1">{slide.description}</p>}
-              </div>
-            )}
-          </div>
-        ))
-      ) : (
-        <slot />
-      )}
-    </div>
-  </div>
-
-  <button class={classes.buttonPrev} data-slot="prev-button" type="button" aria-label="Previous slide">
-    <span class="i-lucide-chevron-left size-5" aria-hidden="true" />
-  </button>
-  <button class={classes.buttonNext} data-slot="next-button" type="button" aria-label="Next slide">
-    <span class="i-lucide-chevron-right size-5" aria-hidden="true" />
-  </button>
-</div>
-
-<script>
-  import EmblaCarousel from "embla-carousel"
-
-  document.querySelectorAll('[data-slot="carousel-root"]').forEach((carouselEl) => {
-    const viewport = carouselEl.querySelector('[data-slot="viewport"]') as HTMLElement
-    const prevBtn = carouselEl.querySelector('[data-slot="prev-button"]') as HTMLButtonElement
-    const nextBtn = carouselEl.querySelector('[data-slot="next-button"]') as HTMLButtonElement
-
-    if (!viewport) return
-
-    const embla = EmblaCarousel(viewport, { loop: true })
-
-    if (prevBtn) prevBtn.addEventListener("click", () => embla.scrollPrev())
-    if (nextBtn) nextBtn.addEventListener("click", () => embla.scrollNext())
-
-    const autoplay = carouselEl.getAttribute("data-autoplay") === "true"
-    if (autoplay) {
-      setInterval(() => {
-        if (embla) embla.scrollNext()
-      }, 4000)
-    }
-  })
-</script>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CarouselProps } from "../../types"
+import carouselThemeDefault, { createCarouselTheme } from "../../themes/carousel.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const carouselTheme = uiConfig.colors ? createCarouselTheme() : carouselThemeDefault
+
+const carousel = scv(carouselTheme)
+
+const {
+  slides,
+  autoplay = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CarouselProps
+
+const classes = resolveClasses(carousel, {}, useUi("carousel", uiProp), className)
+const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
+---
+<div id={carouselId} class={classes.root} data-slot="carousel-root" data-autoplay={autoplay ? "true" : "false"} {...rest}>
+  <div class={classes.viewport} data-slot="viewport">
+    <div class={classes.container} data-slot="container">
+      {slides ? (
+        slides.map((slide) => (
+          <div class={classes.slide} data-slot="slide">
+            {slide.imageSrc && <img src={slide.imageSrc} alt={slide.title || ""} class="w-full aspect-video object-cover rounded-lg" />}
+            {(slide.title || slide.description) && (
+              <div class="absolute bottom-4 left-4 right-4 p-4 rounded-lg bg-black/60 backdrop-blur-sm text-white">
+                {slide.title && <h4 class="text-sm font-semibold">{slide.title}</h4>}
+                {slide.description && <p class="text-xs opacity-95 mt-1">{slide.description}</p>}
+              </div>
+            )}
+          </div>
+        ))
+      ) : (
+        <slot />
+      )}
+    </div>
+  </div>
+
+  <button class={classes.buttonPrev} data-slot="prev-button" type="button" aria-label="Previous slide">
+    <span class="i-lucide-chevron-left size-5" aria-hidden="true" />
+  </button>
+  <button class={classes.buttonNext} data-slot="next-button" type="button" aria-label="Next slide">
+    <span class="i-lucide-chevron-right size-5" aria-hidden="true" />
+  </button>
+</div>
+
+<script>
+  import EmblaCarousel from "embla-carousel"
+
+  document.querySelectorAll('[data-slot="carousel-root"]').forEach((carouselEl) => {
+    const viewport = carouselEl.querySelector('[data-slot="viewport"]') as HTMLElement
+    const prevBtn = carouselEl.querySelector('[data-slot="prev-button"]') as HTMLButtonElement
+    const nextBtn = carouselEl.querySelector('[data-slot="next-button"]') as HTMLButtonElement
+
+    if (!viewport) return
+
+    const embla = EmblaCarousel(viewport, { loop: true })
+
+    if (prevBtn) prevBtn.addEventListener("click", () => embla.scrollPrev())
+    if (nextBtn) nextBtn.addEventListener("click", () => embla.scrollNext())
+
+    const autoplay = carouselEl.getAttribute("data-autoplay") === "true"
+    if (autoplay) {
+      setInterval(() => {
+        if (embla) embla.scrollNext()
+      }, 4000)
+    }
+  })
+</script>

package/src/components/astro/RLAChangelog.astro

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