@rimelight/ui 0.0.30 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [

package/src/components/astro/RLAAlert.astro

@@ -0,0 +1,60 @@
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AlertProps } from "../../types"
+import alertThemeDefault, { createAlertTheme } from "../../themes/alert.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const alertTheme = uiConfig.colors ? createAlertTheme(uiConfig.colors) : alertThemeDefault
+const alert = scv(alertTheme)
+
+const {
+  variant = "default",
+  color = "primary",
+  title,
+  description,
+  icon,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AlertProps
+
+const isIcon = !!(icon || Astro.slots.has("icon"))
+
+const classes = resolveClasses(alert, {
+  variant,
+  color,
+  hasIcon: isIcon,
+}, useUi("alert", uiProp), className)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role="alert"
+  {...rest}
+>
+  <slot name="icon">
+    {icon && (
+      <span class={classes.icon} data-slot="icon">
+        <span class={cx(icon)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+
+  <div class={classes.content} data-slot="content">
+    {title && (
+      <h5 class={classes.title} data-slot="title">
+        {title}
+      </h5>
+    )}
+    <slot name="title" />
+
+    {description && (
+      <div class={classes.description} data-slot="description">
+        {description}
+      </div>
+    )}
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAAlertDialog.astro

@@ -0,0 +1,86 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AlertDialogProps } from "../../types"
+import alertDialogTheme from "../../themes/alertDialog.theme"
+import RLAButton from "./RLAButton.astro"
+
+const alertDialog = scv(alertDialogTheme)
+
+const {
+  variant = "default",
+  title,
+  description,
+  actionLabel = "Confirm",
+  cancelLabel = "Cancel",
+  triggerLabel,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AlertDialogProps
+
+const classes = resolveClasses(alertDialog, {
+  variant
+}, useUi("alertDialog", uiProp), className)
+
+const dialogId = `rla-alert-dialog-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="alert-dialog-container">
+  {triggerLabel ? (
+    <RLAButton
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').showModal()`}
+    >
+      {triggerLabel}
+    </RLAButton>
+  ) : (
+    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={dialogId}
+    class={classes.content}
+    data-slot="content"
+    data-lock-scroll="true"
+    data-close-on-escape="false"
+    data-close-on-click-outside="false"
+    {...rest}
+  >
+    <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 />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer">
+        <RLAButton
+          class={classes.cancelButton}
+          data-slot="cancel"
+          variant="outline"
+          type="button"
+          onclick={`document.getElementById('${dialogId}').close()`}
+        >
+          {cancelLabel}
+        </RLAButton>
+        <RLAButton
+          class={classes.actionButton}
+          data-slot="action"
+          color={variant === "destructive" ? "error" : "primary"}
+          type="button"
+          onclick={`document.getElementById('${dialogId}').close()`}
+        >
+          {actionLabel}
+        </RLAButton>
+      </slot>
+    </div>
+  </dialog>
+</div>

package/src/components/astro/RLAAspectRatio.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AspectRatioProps } from "../../types"
+import aspectRatioTheme from "../../themes/aspectRatio.theme"
+
+const aspectRatio = scv(aspectRatioTheme)
+
+const {
+  ratio = 1,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AspectRatioProps
+
+const classes = resolveClasses(aspectRatio, {}, useUi("aspectRatio", uiProp), className)
+const paddingBottom = `${(1 / ratio) * 100}%`
+---
+<div class={classes.root} data-slot="root" style={{ paddingBottom }} {...rest}>
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAAvatar.astro

@@ -0,0 +1,56 @@
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AvatarProps } from "../../types"
+import avatarThemeDefault from "../../themes/avatar.theme"
+
+const avatar = scv(avatarThemeDefault)
+
+const {
+  src,
+  alt = "",
+  fallback,
+  size = "md",
+  badge = false,
+  badgeColor = "success",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AvatarProps
+
+const classes = resolveClasses(avatar, {
+  size,
+  hasBadge: !!badge
+}, useUi("avatar", uiProp), className)
+---
+<span
+  class={classes.root}
+  data-slot="root"
+  {...rest}
+>
+  <slot>
+    {src ? (
+      <img
+        src={src}
+        alt={alt}
+        class={classes.image}
+        data-slot="image"
+      />
+    ) : (
+      <span class={classes.fallback} data-slot="fallback">
+        <slot name="fallback">
+          {fallback}
+        </slot>
+      </span>
+    )}
+  </slot>
+
+  <slot name="badge">
+    {badge && (
+      <span
+        class={cx(classes.badge, badgeColor && `bg-${badgeColor}-500`)}
+        data-slot="badge"
+      />
+    )}
+  </slot>
+</span>

package/src/components/astro/RLAAvatarGroup.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AvatarGroupProps } from "../../types"
+import avatarGroupTheme from "../../themes/avatarGroup.theme"
+
+const avatarGroup = scv(avatarGroupTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AvatarGroupProps
+
+const classes = resolveClasses(avatarGroup, {}, useUi("avatarGroup", uiProp), className)
+---
+<div class={classes.root} data-slot="avatar-group" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLABadge.astro

@@ -0,0 +1,31 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BadgeProps } from "../../types"
+import badgeThemeDefault, { createBadgeTheme } from "../../themes/badge.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const badgeTheme = uiConfig.colors ? createBadgeTheme(uiConfig.colors) : badgeThemeDefault
+const badge = scv(badgeTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  shape = "pill",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BadgeProps
+
+const classes = resolveClasses(badge, {
+  variant,
+  color,
+  size,
+  shape
+}, useUi("badge", uiProp), className)
+---
+<span class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</span>

package/src/components/astro/RLABreadcrumb.astro

@@ -0,0 +1,44 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BreadcrumbProps } from "../../types"
+import breadcrumbTheme from "../../themes/breadcrumb.theme"
+
+const breadcrumb = scv(breadcrumbTheme)
+
+const {
+  items,
+  separatorIcon = "i-lucide-chevron-right",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BreadcrumbProps
+
+const classes = resolveClasses(breadcrumb, {}, useUi("breadcrumb", uiProp), className)
+---
+<nav class={classes.root} data-slot="breadcrumb-root" {...rest}>
+  <ol class={classes.list} data-slot="list">
+    {items ? (
+      items.map((item, idx) => (
+        <li class={classes.item} data-slot="item">
+          {item.href ? (
+            <a href={item.href} class={classes.link} data-slot="link">
+              {item.label}
+            </a>
+          ) : (
+            <span class={classes.page} data-slot="page">
+              {item.label}
+            </span>
+          )}
+          {idx < items.length - 1 && (
+            <span class={classes.separator} data-slot="separator" aria-hidden="true">
+              <span class={separatorIcon} />
+            </span>
+          )}
+        </li>
+      ))
+    ) : (
+      <slot />
+    )}
+  </ol>
+</nav>

package/src/components/astro/RLACard.astro

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

package/src/components/astro/RLACarousel.astro

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

package/src/components/astro/RLAChart.astro

@@ -0,0 +1,215 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChartProps, ChartDataPoint } from "../../types"
+import chartThemeDefault, { createChartTheme } from "../../themes/chart.theme"
+
+const chartTheme = 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`
+  : ""
+---
+
+<div class={classes.root} data-slot="root" style={`min-height:${height}px`} {...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`}>
+      {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={classes.bar}
+              style={`height:${pct}%;background:${getColor(item, i)};min-height:4px;width:100%;`}
+              title={`${item.label}: ${item.value}`}
+            />
+            <span class={classes.axis}>{item.label}</span>
+          </div>
+        )
+      })}
+    </div>
+  )}
+
+  {/* Line / Area Chart */}
+  {(type === "line" || type === "area") && (
+    <div class="relative w-full" style={`height:${height - 60}px`}>
+      <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" style={`height:${height - 60}px`}>
+      <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">
+            <span
+              class="size-3 rounded-sm shrink-0"
+              style={`background:${getColor(item, i)}`}
+            />
+            <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">
+          <span class="size-2.5 rounded-full shrink-0" style={`background:${getColor(item, i)}`} />
+          <span>{item.label}</span>
+        </div>
+      ))}
+    </div>
+  )}
+</div>