@rimelight/ui 0.0.34 → 0.0.36

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>

package/src/components/astro/RLAChart.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { ChartProps, ChartDataPoint } from "../../types"
 import chartThemeDefault, { createChartTheme } from "../../themes/chart.theme"
 
-const chartTheme = chartThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const chartTheme = uiConfig.colors ? createChartTheme() : chartThemeDefault
 const chart = scv(chartTheme)
 
 const {

package/src/components/astro/RLAChip.astro

@@ -6,7 +6,7 @@ import chipThemeDefault, { createChipTheme } from "../../themes/chip.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
 const uiConfig = getUIConfig()
-const chipTheme = uiConfig.colors ? createChipTheme() : chipThemeDefault
+const chipTheme = uiConfig.colors ? createChipTheme(uiConfig.colors) : chipThemeDefault
 
 const chip = scv(chipTheme)
 
@@ -22,12 +22,18 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as ChipProps
+} = Astro.props as ChipProps & {
+  color?: string
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+  position?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
+  inset?: boolean
+  standalone?: boolean
+}
 
 const classes = resolveClasses(chip, {
-  color,
-  size,
-  position,
+  color: color as "neutral",
+  size: size as "md",
+  position: position as "top-right",
   inset,
   standalone,
   theme

package/src/components/astro/RLACollapsible.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { CollapsibleProps } from "../../types"
 import collapsibleThemeDefault, { createCollapsibleTheme } from "../../themes/collapsible.theme"
 
-const collapsibleTheme = collapsibleThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const collapsibleTheme = uiConfig.colors ? createCollapsibleTheme() : collapsibleThemeDefault
 const collapsible = scv(collapsibleTheme)
 
 const {