@rimelight/ui 0.0.36 → 0.0.38

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>

package/src/components/astro/RLAChatShimmer.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatShimmerProps } from "../../types"
-import chatShimmerThemeDefault, { createChatShimmerTheme } from "../../themes/chat-shimmer.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const chatShimmerTheme = uiConfig.colors ? createChatShimmerTheme() : chatShimmerThemeDefault
-
-const chatShimmer = scv(chatShimmerTheme)
-
-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

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatToolProps } from "../../types"
-import chatToolThemeDefault, { createChatToolTheme } from "../../themes/chat-tool.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const chatToolTheme = uiConfig.colors ? createChatToolTheme() : chatToolThemeDefault
-
-const chatTool = scv(chatToolTheme)
-
-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

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

@@ -1,57 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChipProps } from "../../types"
-import chipThemeDefault, { createChipTheme } from "../../themes/chip.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const chipTheme = uiConfig.colors ? createChipTheme(uiConfig.colors) : chipThemeDefault
-
-const chip = scv(chipTheme)
-
-const {
-  text,
-  color = "primary",
-  size = "md",
-  position = "top-right",
-  inset = false,
-  standalone = false,
-  show = true,
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = 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: color as "neutral",
-  size: size as "md",
-  position: position as "top-right",
-  inset,
-  standalone,
-  theme
-}, useUi("chip", uiProp), className)
----
-{standalone ? (
-  show && (
-    <span class={classes.base} data-slot="base">
-      <slot>{text}</slot>
-    </span>
-  )
-) : (
-  <div class={classes.root} data-slot="root" {...rest}>
-    <slot />
-    {show && (
-      <span class={classes.base} data-slot="base">
-        <slot name="content">{text}</slot>
-      </span>
-    )}
-  </div>
-)}

package/src/components/astro/RLACollapsible.astro

@@ -1,41 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CollapsibleProps } from "../../types"
-import collapsibleThemeDefault, { createCollapsibleTheme } from "../../themes/collapsible.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const collapsibleTheme = uiConfig.colors ? createCollapsibleTheme() : 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>