@rimelight/ui 0.0.30 → 0.0.32

package/src/components/astro/RLAChart.astro

@@ -0,0 +1,239 @@
+---
+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)
+
+// 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)
+
+// 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]
+
+// 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
+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`
+  : ""
+---
+
+<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">
+      {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} rlc-${instanceId}-b-${i}`}
+              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 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">
+            <span
+              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>
+          </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 rlc-${instanceId}-s-${i}`} />
+          <span>{item.label}</span>
+        </div>
+      ))}
+    </div>
+  )}
+</div>

package/src/components/astro/RLAChat.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatProps } from "../../types"
+import chatThemeDefault from "../../themes/chat.theme"
+
+const chat = scv(chatThemeDefault)
+
+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,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatMessageProps } from "../../types"
+import chatMessageThemeDefault from "../../themes/chat-message.theme"
+
+const chatMessage = scv(chatMessageThemeDefault)
+
+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,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatMessagesProps } from "../../types"
+import chatMessagesThemeDefault from "../../themes/chat-messages.theme"
+
+const chatMessages = scv(chatMessagesThemeDefault)
+
+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,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatPaletteProps } from "../../types"
+import chatPaletteThemeDefault from "../../themes/chat-palette.theme"
+
+const chatPalette = scv(chatPaletteThemeDefault)
+
+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

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatPromptProps } from "../../types"
+import chatPromptThemeDefault from "../../themes/chat-prompt.theme"
+
+const chatPrompt = scv(chatPromptThemeDefault)
+
+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

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatPromptSubmitProps } from "../../types"
+import chatPromptSubmitThemeDefault from "../../themes/chat-prompt-submit.theme"
+
+const chatPromptSubmit = scv(chatPromptSubmitThemeDefault)
+
+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

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChatReasoningProps } from "../../types"
+import chatReasoningThemeDefault from "../../themes/chat-reasoning.theme"
+
+const chatReasoning = scv(chatReasoningThemeDefault)
+
+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>

package/src/components/astro/RLAChatShimmer.astro

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

package/src/components/astro/RLAChatTool.astro

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

package/src/components/astro/RLACheckbox.astro

@@ -0,0 +1,53 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CheckboxProps } from "../../types"
+import checkboxThemeDefault, { createCheckboxTheme } from "../../themes/checkbox.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const checkboxTheme = uiConfig.colors ? createCheckboxTheme(uiConfig.colors) : checkboxThemeDefault
+
+const checkbox = scv(checkboxTheme)
+
+const {
+  checked = false,
+  disabled = false,
+  name,
+  label,
+  color = "primary",
+  size = "md",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CheckboxProps
+
+const classes = resolveClasses(checkbox, {
+  color,
+  size,
+  checked,
+  theme
+}, useUi("checkbox", uiProp), className);
+---
+<label class={classes.root} data-slot="root">
+  <input
+    type="checkbox"
+    class={classes.input}
+    checked={checked}
+    disabled={disabled}
+    name={name}
+    {...rest}
+  />
+  <div class={classes.box} data-slot="box">
+    <div class={classes.indicator} data-slot="indicator">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="size-3"><path d="M20 6 9 17l-5-5"/></svg>
+    </div>
+  </div>
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+</label>

package/src/components/astro/RLAChip.astro

@@ -0,0 +1,20 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ChipProps } from "../../types"
+import chipThemeDefault from "../../themes/chip.theme"
+
+const chip = scv(chipThemeDefault)
+
+const {
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ChipProps
+
+const classes = resolveClasses(chip, { theme }, useUi("chip", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLACollapsible.astro

@@ -0,0 +1,38 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CollapsibleProps } from "../../types"
+import collapsibleThemeDefault, { createCollapsibleTheme } from "../../themes/collapsible.theme"
+
+const collapsibleTheme = collapsibleThemeDefault
+const collapsible = scv(collapsibleTheme)
+
+const {
+  open = false,
+  label = "Toggle",
+  icon,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CollapsibleProps
+
+const classes = resolveClasses(collapsible, {
+  open
+}, useUi("collapsible", uiProp), className);
+---
+<details class={classes.root} open={open ? true : undefined} data-slot="root" {...rest}>
+  <summary class={classes.trigger} data-slot="trigger">
+    <slot name="trigger">
+      <span class="flex items-center gap-2">
+        {icon && <span class={icon} />}
+        {label}
+      </span>
+      <span class="i-lucide-chevron-down transition-transform duration-200 group-open:rotate-180" />
+    </slot>
+  </summary>
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</details>

package/src/components/astro/RLAColorPicker.astro

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

package/src/components/astro/RLACommandPalette.astro

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

package/src/components/astro/RLACompare.astro

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

package/src/components/astro/RLAConfirm.astro

@@ -0,0 +1,86 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AlertDialogProps } from "../../types"
+import alertDialogTheme from "../../themes/confirm.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>