@rimelight/ui 0.0.31 → 0.0.33

package/src/components/astro/RLAButton.astro

@@ -4,6 +4,7 @@ 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
@@ -18,10 +19,13 @@ const {
   label,
   leadingIcon,
   trailingIcon,
+  avatar,
   loading = false,
+  loadingAuto = false,
   square = false,
   block = false,
   active = false,
+  theme,
   activeColor,
   activeVariant,
   ui: uiProp,
@@ -29,7 +33,7 @@ const {
   ...rest
 } = Astro.props as ButtonProps
 
-const isLeading = !!(leadingIcon || Astro.slots.has("leading")) || loading
+const isLeading = !!(leadingIcon || avatar || Astro.slots.has("leading")) || loading
 const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
 
 const showLeadingIcon = loading
@@ -52,21 +56,34 @@ const classes = resolveClasses(button, {
   leading: isLeading,
   trailing: isTrailing,
   loading,
-  active
+  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">
-        <span class={cx(showLeadingIcon, leadingIconClass)} aria-hidden="true" />
+        {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>
@@ -86,3 +103,37 @@ const Tag = href ? "a" : "button";
     )}
   </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

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

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

package/src/components/astro/RLAChart.astro

@@ -20,6 +20,9 @@ const {
 
 const classes = resolveClasses(chart, {}, useUi("chart", uiProp), className)
 
+// Unique instance ID to prevent CSS collisions between multiple charts
+const instanceId = Math.random().toString(36).substring(2, 8)
+
 // Compute derived values on the server so we don't do heavy JS on the client
 const max = data.length > 0 ? Math.max(...data.map(d => d.value)) : 1
 const total = data.reduce((sum, d) => sum + d.value, 0)
@@ -37,6 +40,21 @@ const palette = [
 const getColor = (item: ChartDataPoint, index: number) =>
   item.color ?? palette[index % palette.length]
 
+// Strip angle brackets from color values to prevent XSS via </style> breakout
+const cssColor = (item: ChartDataPoint, index: number) =>
+  getColor(item, index).replace(/[<>]/g, "")
+
+// Build per-item CSS rules to avoid inline styles (CSP compliance)
+const itemCssRules: string[] = []
+data.forEach((item, i) => {
+  if (type === "bar") {
+    const pct = max > 0 ? (item.value / max) * 100 : 0
+    itemCssRules.push(`.rlc-${instanceId}-b-${i}{height:${pct}%;background:${cssColor(item, i)};min-height:4px;width:100%}`)
+  }
+  itemCssRules.push(`.rlc-${instanceId}-s-${i}{background:${cssColor(item, i)}}`)
+})
+const chartItemStyles = itemCssRules.join("")
+
 // Build pie/donut SVG path segments
 const PIE_R = 80
 const PIE_CX = 100
@@ -83,12 +101,20 @@ const areaPath = linePoints.length > 0
   : ""
 ---
 
-<div class={classes.root} data-slot="root" style={`min-height:${height}px`} {...rest}>
+<style define:vars={{ chartH: `${height}px`, chartInnerH: `${height - 60}px` }}>
+  [data-slot="root"] { min-height: var(--chart-h); }
+  [data-slot="container"] { height: var(--chart-inner-h); gap: 6px; align-items: flex-end; }
+  .rla-chart-line-wrap { height: var(--chart-inner-h); }
+  .rla-chart-pie-wrap { height: var(--chart-inner-h); }
+</style>
+<style set:html={chartItemStyles}></style>
+
+<div class={classes.root} data-slot="root" {...rest}>
   {title && <div class={classes.title} data-slot="title">{title}</div>}
 
   {/* Bar Chart */}
   {type === "bar" && (
-    <div class={classes.container} data-slot="container" style={`height:${height - 60}px;gap:6px;align-items:flex-end`}>
+    <div class={classes.container} data-slot="container">
       {data.map((item, i) => {
         const pct = max > 0 ? (item.value / max) * 100 : 0
         return (
@@ -97,8 +123,7 @@ const areaPath = linePoints.length > 0
               {item.value}
             </span>
             <div
-              class={classes.bar}
-              style={`height:${pct}%;background:${getColor(item, i)};min-height:4px;width:100%;`}
+              class={`${classes.bar} rlc-${instanceId}-b-${i}`}
               title={`${item.label}: ${item.value}`}
             />
             <span class={classes.axis}>{item.label}</span>
@@ -110,7 +135,7 @@ const areaPath = linePoints.length > 0
 
   {/* Line / Area Chart */}
   {(type === "line" || type === "area") && (
-    <div class="relative w-full" style={`height:${height - 60}px`}>
+    <div class="relative w-full rla-chart-line-wrap">
       <svg
         class={classes.svg}
         viewBox={`0 0 ${LINE_W} ${LINE_H}`}
@@ -155,7 +180,7 @@ const areaPath = linePoints.length > 0
 
   {/* Pie / Donut Chart */}
   {(type === "pie" || type === "donut") && (
-    <div class="flex items-center gap-6 justify-center" style={`height:${height - 60}px`}>
+    <div class="flex items-center gap-6 justify-center rla-chart-pie-wrap">
       <svg
         viewBox="0 0 200 200"
         class="h-full w-auto max-h-48"
@@ -187,8 +212,7 @@ const areaPath = linePoints.length > 0
         {data.map((item, i) => (
           <div class="flex items-center gap-2 text-xs text-muted-foreground">
             <span
-              class="size-3 rounded-sm shrink-0"
-              style={`background:${getColor(item, i)}`}
+              class={`size-3 rounded-sm shrink-0 rlc-${instanceId}-s-${i}`}
             />
             <span>{item.label}</span>
             <span class="ml-1 font-mono text-foreground">{item.value}</span>
@@ -206,7 +230,7 @@ const areaPath = linePoints.length > 0
     <div class={classes.legend} data-slot="legend">
       {data.map((item, i) => (
         <div class="flex items-center gap-1.5">
-          <span class="size-2.5 rounded-full shrink-0" style={`background:${getColor(item, i)}`} />
+          <span class={`size-2.5 rounded-full shrink-0 rlc-${instanceId}-s-${i}`} />
           <span>{item.label}</span>
         </div>
       ))}

package/src/components/astro/RLAChat.astro

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

package/src/components/astro/RLAChatMessage.astro

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

package/src/components/astro/RLAChatMessages.astro

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

package/src/components/astro/RLAChatPalette.astro

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