@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLAButton.astro

@@ -1,139 +1,145 @@
----
-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,
-  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")),
-  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>
-)}
+---
+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 & {
+  rounded?: boolean
+  activeColor?: string
+  activeVariant?: string
+}
+
+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) as "solid",
+  color: (active && activeColor ? activeColor : color) as "neutral",
+  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/RLACallout.astro

@@ -0,0 +1,112 @@
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CalloutProps } from "../../types"
+import calloutThemeDefault, { createCalloutTheme } from "../../themes/callout.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import RLAAvatar from "./RLAAvatar.astro"
+
+const uiConfig = getUIConfig()
+const calloutTheme = uiConfig.colors ? createCalloutTheme(uiConfig.colors) : calloutThemeDefault
+const callout = scv(calloutTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  title,
+  description,
+  icon,
+  avatar,
+  actions,
+  close,
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CalloutProps
+
+const colorToIcon: Record<string, string | undefined> = {
+  error: "i-lucide-circle-x",
+  warning: "i-lucide-triangle-alert",
+  info: "i-lucide-info",
+  success: "i-lucide-circle-check",
+  primary: undefined,
+  secondary: undefined,
+  commentary: undefined,
+  ideation: undefined,
+  source: undefined,
+  neutral: undefined
+}
+
+const resolvedColor = (variant === "destructive") ? "error" : color
+const resolvedVariant = (variant === "solid" || variant === "outline" || variant === "soft" || variant === "subtle") ? variant : "solid"
+const resolvedIcon = icon ?? colorToIcon[resolvedColor]
+const hasTitleRow = !!(title || Astro.slots.has("title") || Astro.slots.has("header") || avatar || close || Astro.slots.has("close"))
+
+const classes = resolveClasses(callout, {
+  variant: resolvedVariant,
+  color: resolvedColor as any,
+  theme
+}, useUi("callout", uiProp), className)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role="alert"
+  {...rest}
+>
+  <slot name="icon">
+    {resolvedIcon && (
+      <span class={classes.icon} data-slot="icon">
+        <span class={cx(resolvedIcon)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+
+  <div class={classes.body} data-slot="body">
+    {hasTitleRow && (
+      <div class="flex items-center gap-2.5">
+        <slot name="avatar" {...{ ui: classes }}>
+          {avatar && (
+            <RLAAvatar
+              {...(typeof avatar === 'string' ? { src: avatar } : avatar)}
+              size={classes.avatarSize as any}
+              class={classes.avatar}
+              data-slot="avatar"
+            />
+          )}
+        </slot>
+
+        {(title || Astro.slots.has("title")) && (
+          <h5 class={classes.title} data-slot="title">
+            {title}
+            <slot name="title" />
+          </h5>
+        )}
+
+        <slot name="header" />
+
+        <slot name="close">
+          {close && (
+            <button class={classes.close} data-slot="close">
+              <span class="i-lucide-x size-4" />
+            </button>
+          )}
+        </slot>
+      </div>
+    )}
+
+    {(description || Astro.slots.has("default")) && (
+      <div class={classes.content} data-slot="content">
+        {description}
+        <slot />
+      </div>
+    )}
+
+    {(actions || Astro.slots.has("actions")) && (
+      <div class={classes.actions} data-slot="actions">
+        <slot name="actions" />
+      </div>
+    )}
+  </div>
+</div>

package/src/components/astro/RLACard.astro

@@ -32,6 +32,7 @@ const Tag = href ? "a" : "div"
   class={classes.root}
   data-slot="card-root"
   {...(Tag === "a" ? { href } : {})}
+  {...(Tag === "a" ? { style: "text-decoration: none" } : {})}
   {...rest}
 >
   <slot name="media">
@@ -44,8 +45,8 @@ const Tag = href ? "a" : "div"
 
   {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>}
+      {title && <div class={classes.title} data-slot="title">{title}</div>}
+      {description && <div class={classes.description} data-slot="description">{description}</div>}
       <slot />
     </div>
   ) : (
@@ -53,17 +54,17 @@ const Tag = href ? "a" : "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>}
+            {title && <div class={classes.title} data-slot="title">{title}</div>}
             <slot name="title" />
             
-            {description && <p class={classes.description} data-slot="description">{description}</p>}
+            {description && <div class={classes.description} data-slot="description">{description}</div>}
             <slot name="description" />
           </div>
         )}
       </slot>
 
       {Astro.slots.has("default") && (
-        <div class={classes.content} data-slot="content">
+        <div class={classes.body} data-slot="body">
           <slot />
         </div>
       )}

package/src/components/astro/RLACarousel.astro

@@ -1,75 +1,104 @@
----
-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>
+---
+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)}`
+---
+<rla-carousel data-autoplay={autoplay ? "true" : "false"} {...rest}>
+  <div id={carouselId} class={classes.root} data-slot="carousel-root">
+    <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>
+</rla-carousel>
+
+<script>
+  import EmblaCarousel from "embla-carousel"
+
+  class RLACarousel extends HTMLElement {
+    private emblaCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const autoplay = this.getAttribute("data-autoplay") === "true";
+      const viewport = this.querySelector('[data-slot="viewport"]') as HTMLElement;
+      const prevBtn = this.querySelector('[data-slot="prev-button"]') as HTMLButtonElement;
+      const nextBtn = this.querySelector('[data-slot="next-button"]') as HTMLButtonElement;
+
+      if (!viewport) return;
+
+      const embla = EmblaCarousel(viewport, { loop: true });
+
+      const onPrevClick = () => embla.scrollPrev();
+      const onNextClick = () => embla.scrollNext();
+
+      if (prevBtn) prevBtn.addEventListener("click", onPrevClick);
+      if (nextBtn) nextBtn.addEventListener("click", onNextClick);
+
+      let intervalId: any = null;
+      if (autoplay) {
+        intervalId = setInterval(() => {
+          embla.scrollNext();
+        }, 4000);
+      }
+
+      this.emblaCleanup = () => {
+        if (prevBtn) prevBtn.removeEventListener("click", onPrevClick);
+        if (nextBtn) nextBtn.removeEventListener("click", onNextClick);
+        if (intervalId) clearInterval(intervalId);
+        embla.destroy();
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.emblaCleanup) {
+        this.emblaCleanup();
+        this.emblaCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-carousel')) {
+    customElements.define('rla-carousel', RLACarousel);
+  }
+</script>