@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLACarousel.astro

@@ -1,280 +0,0 @@
----
-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">
-              <div class="relative w-full aspect-video">
-                {slide.imageSrc && <img src={slide.imageSrc} alt={slide.title || ""} class="w-full h-full object-cover rounded-lg" draggable="false" />}
-                {(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>
-            </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>
-  class RLACarousel extends HTMLElement {
-    private cleanup: (() => 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 container = this.querySelector('[data-slot="container"]') as HTMLElement;
-      const prevBtn = this.querySelector('[data-slot="prev-button"]') as HTMLButtonElement;
-      const nextBtn = this.querySelector('[data-slot="next-button"]') as HTMLButtonElement;
-
-      if (!viewport || !container) return;
-
-      const originalSlides = Array.from(container.children) as HTMLElement[];
-      const N = originalSlides.length;
-      if (N === 0) return;
-
-      // Clone first and last slides for seamless looping
-      const firstClone = originalSlides[0].cloneNode(true) as HTMLElement;
-      const lastClone = originalSlides[N - 1].cloneNode(true) as HTMLElement;
-
-      container.insertBefore(lastClone, originalSlides[0]);
-      container.appendChild(firstClone);
-
-      // Add draggable="false" to all images inside clones as well
-      container.querySelectorAll('img').forEach(img => {
-        img.setAttribute('draggable', 'false');
-      });
-
-      let currentIndex = 1; // Start at the first actual slide
-      let isTransitioning = false;
-      let startX = 0;
-      let startY = 0;
-      let isDragging = false;
-      let hasDragged = false;
-      let autoplayIntervalId: any = null;
-
-      const updateTransform = (withTransition: boolean, translatePercent?: number) => {
-        if (withTransition) {
-          container.style.transition = 'transform 500ms cubic-bezier(0.16, 1, 0.3, 1)';
-        } else {
-          container.style.transition = 'none';
-        }
-        const pct = translatePercent !== undefined ? translatePercent : -currentIndex * 100;
-        container.style.transform = `translate3d(${pct}%, 0px, 0px)`;
-      };
-
-      // Set initial position
-      updateTransform(false);
-
-      const handleTransitionEnd = () => {
-        isTransitioning = false;
-        if (currentIndex === 0) {
-          currentIndex = N;
-          updateTransform(false);
-        } else if (currentIndex === N + 1) {
-          currentIndex = 1;
-          updateTransform(false);
-        }
-      };
-
-      const goToIndex = (index: number) => {
-        if (isTransitioning) return;
-        isTransitioning = true;
-        currentIndex = index;
-        updateTransform(true);
-      };
-
-      const scrollPrev = () => {
-        goToIndex(currentIndex - 1);
-      };
-
-      const scrollNext = () => {
-        goToIndex(currentIndex + 1);
-      };
-
-      // Autoplay
-      const startAutoplay = () => {
-        if (autoplay && !autoplayIntervalId) {
-          autoplayIntervalId = setInterval(scrollNext, 5000);
-        }
-      };
-
-      const stopAutoplay = () => {
-        if (autoplayIntervalId) {
-          clearInterval(autoplayIntervalId);
-          autoplayIntervalId = null;
-        }
-      };
-
-      startAutoplay();
-
-      // Button event listeners with throttle
-      let lastBtnClickTime = 0;
-      const handleBtnClick = (action: () => void) => {
-        const now = Date.now();
-        if (now - lastBtnClickTime < 500) return;
-        lastBtnClickTime = now;
-        stopAutoplay();
-        action();
-        startAutoplay();
-      };
-
-      const onPrevClick = (e: MouseEvent) => {
-        e.preventDefault();
-        handleBtnClick(scrollPrev);
-      };
-
-      const onNextClick = (e: MouseEvent) => {
-        e.preventDefault();
-        handleBtnClick(scrollNext);
-      };
-
-      if (prevBtn) prevBtn.addEventListener("click", onPrevClick);
-      if (nextBtn) nextBtn.addEventListener("click", onNextClick);
-
-      // Pointer events for drag/swipe
-      const onPointerDown = (e: PointerEvent) => {
-        if (isTransitioning) return;
-        stopAutoplay();
-        startX = e.clientX;
-        startY = e.clientY;
-        isDragging = true;
-        hasDragged = false;
-        try {
-          viewport.setPointerCapture(e.pointerId);
-        } catch (err) {}
-      };
-
-      const onPointerMove = (e: PointerEvent) => {
-        if (!isDragging) return;
-        const deltaX = e.clientX - startX;
-        const deltaY = e.clientY - startY;
-
-        if (!hasDragged) {
-          // If vertical movement is greater than horizontal early on, cancel drag to let page scroll
-          if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 5) {
-            isDragging = false;
-            try {
-              viewport.releasePointerCapture(e.pointerId);
-            } catch (err) {}
-            return;
-          }
-          if (Math.abs(deltaX) > 5) {
-            hasDragged = true;
-            container.style.transition = 'none'; // Only disable transition when we actually start dragging
-          }
-        }
-
-        if (hasDragged) {
-          e.preventDefault();
-          const width = viewport.clientWidth;
-          const deltaPercent = (deltaX / width) * 100;
-          const basePercent = -currentIndex * 100;
-          updateTransform(false, basePercent + deltaPercent);
-        }
-      };
-
-      const onPointerUp = (e: PointerEvent) => {
-        if (!isDragging) return;
-        isDragging = false;
-        try {
-          viewport.releasePointerCapture(e.pointerId);
-        } catch (err) {}
-
-        if (hasDragged) {
-          const deltaX = e.clientX - startX;
-          const width = viewport.clientWidth;
-          const threshold = width * 0.15;
-
-          if (deltaX < -threshold) {
-            scrollNext();
-          } else if (deltaX > threshold) {
-            scrollPrev();
-          } else {
-            // Snap back
-            isTransitioning = true;
-            updateTransform(true);
-            setTimeout(() => {
-              isTransitioning = false;
-            }, 50);
-          }
-        } else {
-          // If it was just a click, make sure transition settings are restored
-          container.style.transition = 'transform 500ms cubic-bezier(0.16, 1, 0.3, 1)';
-          isTransitioning = false;
-        }
-        startAutoplay();
-      };
-
-      viewport.addEventListener("pointerdown", onPointerDown);
-      viewport.addEventListener("pointermove", onPointerMove, { passive: false });
-      viewport.addEventListener("pointerup", onPointerUp);
-      viewport.addEventListener("pointercancel", onPointerUp);
-      container.addEventListener("transitionend", handleTransitionEnd);
-
-      this.cleanup = () => {
-        stopAutoplay();
-        if (prevBtn) prevBtn.removeEventListener("click", onPrevClick);
-        if (nextBtn) nextBtn.removeEventListener("click", onNextClick);
-        viewport.removeEventListener("pointerdown", onPointerDown);
-        viewport.removeEventListener("pointermove", onPointerMove);
-        viewport.removeEventListener("pointerup", onPointerUp);
-        viewport.removeEventListener("pointercancel", onPointerUp);
-        container.removeEventListener("transitionend", handleTransitionEnd);
-        
-        if (container.contains(firstClone)) container.removeChild(firstClone);
-        if (container.contains(lastClone)) container.removeChild(lastClone);
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.cleanup) {
-        this.cleanup();
-        this.cleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-carousel')) {
-    customElements.define('rla-carousel', RLACarousel);
-  }
-</script>

package/src/components/astro/RLAChart.astro

@@ -1,227 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChartProps, ChartDataPoint } from "../../types"
-import chartThemeDefault, { createChartTheme } from "../../themes/chart.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const chartTheme = uiConfig.colors ? createChartTheme() : chartThemeDefault
-const chart = scv(chartTheme)
-
-const {
-  type = "bar",
-  data = [],
-  title,
-  height = 280,
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChartProps
-
-const classes = resolveClasses(chart, {}, useUi("chart", uiProp), className)
-
-// 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)
-
-// Palette for chart segments/bars when no per-item color given
-const palette = [
-  "hsl(221 83% 53%)", // blue
-  "hsl(262 83% 58%)", // violet
-  "hsl(142 76% 36%)", // green
-  "hsl(32 95% 44%)",  // amber
-  "hsl(0 84% 60%)",   // red
-  "hsl(187 85% 43%)", // cyan
-]
-
-const getColor = (item: ChartDataPoint, index: number) =>
-  item.color ?? palette[index % palette.length]
-
-// Build pie/donut SVG path segments
-const PIE_R = 80
-const PIE_CX = 100
-const PIE_CY = 100
-const DONUT_INNER_R = 45
-
-const polarToCartesian = (cx: number, cy: number, r: number, angleDeg: number) => {
-  const rad = (angleDeg - 90) * (Math.PI / 180)
-  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }
-}
-
-const describeArc = (cx: number, cy: number, r: number, start: number, end: number) => {
-  const s = polarToCartesian(cx, cy, r, start)
-  const e = polarToCartesian(cx, cy, r, end)
-  const largeArc = end - start > 180 ? 1 : 0
-  return `M ${s.x} ${s.y} A ${r} ${r} 0 ${largeArc} 1 ${e.x} ${e.y}`
-}
-
-let pieCursor = 0
-const pieSlices = data.map((item, i) => {
-  const angle = (item.value / (total || 1)) * 360
-  const start = pieCursor
-  const end = pieCursor + angle
-  pieCursor = end
-  return { item, i, start, end }
-})
-
-// Build line chart SVG points
-const LINE_W = 400
-const LINE_H = 160
-const LINE_PAD = 32
-const linePoints = data.map((d, i) => {
-  const x = data.length < 2
-    ? LINE_PAD
-    : LINE_PAD + (i / (data.length - 1)) * (LINE_W - LINE_PAD * 2)
-  const y = LINE_H - LINE_PAD - ((d.value / (max || 1)) * (LINE_H - LINE_PAD * 2))
-  return { x, y, d, i }
-})
-const linePath = linePoints.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ")
-const areaPath = linePoints.length > 0
-  ? linePath +
-    ` L ${linePoints[linePoints.length - 1]!.x} ${LINE_H - LINE_PAD}` +
-    ` L ${linePoints[0]!.x} ${LINE_H - LINE_PAD} Z`
-  : ""
-const id = `chart-${Math.random().toString(36).substring(2, 9)}`
----
-
-<style is:inline set:html={`
-  .${id} { min-height: ${height}px; }
-  .${id} [data-slot="container"] { height: ${height - 60}px; gap: 6px; align-items: flex-end; }
-  .${id} .rla-chart-line-wrap { height: ${height - 60}px; }
-  .${id} .rla-chart-pie-wrap { height: ${height - 60}px; }
-`} />
-
-<div class:list={[classes.root, id]} 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">
-      {data.map((item, i) => {
-        const pct = max > 0 ? (item.value / max) * 100 : 0
-        return (
-          <div class="flex flex-col items-center gap-1 flex-1 group">
-            <span class="text-[10px] text-muted-foreground font-mono opacity-0 group-hover:opacity-100 transition-opacity">
-              {item.value}
-            </span>
-            <div class:list={[classes.bar, "h-full w-full overflow-hidden !bg-transparent"]} title={`${item.label}: ${item.value}`}>
-              <svg class="h-full w-full overflow-visible" viewBox="0 0 20 100" preserveAspectRatio="none">
-                <rect x="0" y={100 - pct} width="20" height={pct} fill={getColor(item, i)} rx="2" />
-              </svg>
-            </div>
-            <span class={classes.axis}>{item.label}</span>
-          </div>
-        )
-      })}
-    </div>
-  )}
-
-  {/* Line / Area Chart */}
-  {(type === "line" || type === "area") && (
-    <div class="relative w-full rla-chart-line-wrap">
-      <svg
-        class={classes.svg}
-        viewBox={`0 0 ${LINE_W} ${LINE_H}`}
-        preserveAspectRatio="none"
-        aria-label={title ?? "Line chart"}
-      >
-        {/* Grid lines */}
-        {[0, 0.25, 0.5, 0.75, 1].map(t => {
-          const y = LINE_PAD + t * (LINE_H - LINE_PAD * 2)
-          return <line x1={LINE_PAD} y1={y} x2={LINE_W - LINE_PAD} y2={y} stroke="currentColor" stroke-opacity="0.08" />
-        })}
-
-        {/* Area fill */}
-        {type === "area" && (
-          <path d={areaPath} fill={palette[0]!} fill-opacity="0.15" />
-        )}
-
-        {/* Line */}
-        <path d={linePath} class={classes.line} stroke={palette[0]!} stroke-width="2.5" />
-
-        {/* Dots */}
-        {linePoints.map(p => (
-          <circle
-            cx={p.x}
-            cy={p.y}
-            r="4"
-            fill={getColor(p.d, p.i)}
-            stroke="white"
-            stroke-width="1.5"
-          >
-            <title>{p.d.label}: {p.d.value}</title>
-          </circle>
-        ))}
-
-        {/* X axis labels */}
-        {linePoints.map(p => (
-          <text x={p.x} y={LINE_H - 4} text-anchor="middle" class={classes.axis}>{p.d.label}</text>
-        ))}
-      </svg>
-    </div>
-  )}
-
-  {/* Pie / Donut Chart */}
-  {(type === "pie" || type === "donut") && (
-    <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"
-        aria-label={title ?? "Pie chart"}
-      >
-        {pieSlices.map(({ item, i, start, end }) => {
-          const isFullCircle = Math.abs(end - start - 360) < 0.01
-          const d = isFullCircle
-            ? `M ${PIE_CX} ${PIE_CY - PIE_R} A ${PIE_R} ${PIE_R} 0 1 1 ${PIE_CX - 0.001} ${PIE_CY - PIE_R} Z`
-            : describeArc(PIE_CX, PIE_CY, PIE_R, start, end) +
-              ` L ${PIE_CX} ${PIE_CY} Z`
-          return (
-            <path
-              d={d}
-              fill={getColor(item, i)}
-              class="transition-opacity hover:opacity-85 cursor-pointer"
-            >
-              <title>{item.label}: {item.value}</title>
-            </path>
-          )
-        })}
-        {type === "donut" && (
-          <circle cx={PIE_CX} cy={PIE_CY} r={DONUT_INNER_R} fill="var(--color-card, white)" />
-        )}
-      </svg>
-
-      {/* Legend */}
-      <div class="flex flex-col gap-1.5">
-        {data.map((item, i) => (
-          <div class="flex items-center gap-2 text-xs text-muted-foreground">
-            <svg class="size-3 shrink-0" viewBox="0 0 10 10">
-              <rect width="10" height="10" rx="2" fill={getColor(item, i)} />
-            </svg>
-            <span>{item.label}</span>
-            <span class="ml-1 font-mono text-foreground">{item.value}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )}
-
-  {/* Custom slot for fully custom chart content */}
-  <slot />
-
-  {/* Legend row for bar/line */}
-  {(type === "bar" || type === "line" || type === "area") && data.length > 0 && (
-    <div class={classes.legend} data-slot="legend">
-      {data.map((item, i) => (
-        <div class="flex items-center gap-1.5">
-          <svg class="size-2.5 shrink-0" viewBox="0 0 10 10">
-            <circle cx="5" cy="5" r="5" fill={getColor(item, i)} />
-          </svg>
-          <span>{item.label}</span>
-        </div>
-      ))}
-    </div>
-  )}
-</div>

package/src/components/astro/RLAChat.astro

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

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

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

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

package/src/components/astro/RLAChatPrompt.astro

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

package/src/components/astro/RLAChatPromptSubmit.astro

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

package/src/components/astro/RLAChatReasoning.astro

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