@rimelight/ui 0.0.47 → 0.0.48

package/src/components/carousel/RLSCarousel.tsx

@@ -0,0 +1,260 @@
+import {
+  children,
+  createMemo,
+  createSignal,
+  For,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { CarouselProps, CarouselSlide } from "./carousel"
+import { carouselTheme } from "./carousel.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSCarouselProps extends CarouselProps {
+  children?: JSX.Element
+}
+
+const SLIDE_TRANSITION = "transform 500ms cubic-bezier(0.16, 1, 0.3, 1)"
+
+const RLSCarousel: Component<RLSCarouselProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["slides", "autoplay", "ui", "class", "children"])
+
+  const [index, setIndex] = createSignal(0)
+  const [dragOffset, setDragOffset] = createSignal(0)
+  const [isDragging, setIsDragging] = createSignal(false)
+
+  const childrenContent = children(() => props.children)
+
+  const slideCount = createMemo(() => {
+    if (props.slides && props.slides.length > 0) return props.slides.length
+    return childrenContent.toArray().length
+  })
+
+  let viewportRef: HTMLDivElement | undefined
+  let containerRef: HTMLDivElement | undefined
+  let startX = 0
+  let startY = 0
+  let hasDragged = false
+  let intervalId: ReturnType<typeof setInterval> | undefined
+  let lastBtnClickTime = 0
+
+  const resolvedClasses = createMemo(() =>
+    carouselTheme({
+      active: false,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const dotActiveClasses = createMemo(() =>
+    carouselTheme({
+      active: true,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
+  const dots = createMemo(() => Array.from({ length: slideCount() }, (_, i) => i))
+
+  const goTo = (n: number) => {
+    const count = slideCount()
+    if (count === 0) return
+    setIndex(((n % count) + count) % count)
+  }
+
+  const next = () => goTo(index() + 1)
+  const prev = () => goTo(index() - 1)
+
+  const startAutoplay = () => {
+    if (props.autoplay && !intervalId) {
+      intervalId = setInterval(() => goTo(index() + 1), 5000)
+    }
+  }
+
+  const stopAutoplay = () => {
+    if (intervalId) {
+      clearInterval(intervalId)
+      intervalId = undefined
+    }
+  }
+
+  onMount(() => {
+    startAutoplay()
+    onCleanup(stopAutoplay)
+  })
+
+  const handleBtnClick = (action: () => void) => {
+    const now = Date.now()
+    if (now - lastBtnClickTime < 500) return
+    lastBtnClickTime = now
+    stopAutoplay()
+    action()
+    startAutoplay()
+  }
+
+  const handlePointerDown = (e: PointerEvent) => {
+    if (!viewportRef) return
+    stopAutoplay()
+    startX = e.clientX
+    startY = e.clientY
+    hasDragged = false
+    setIsDragging(true)
+    try {
+      viewportRef.setPointerCapture(e.pointerId)
+    } catch {}
+  }
+
+  const handlePointerMove = (e: PointerEvent) => {
+    if (!isDragging() || !viewportRef || !containerRef) return
+    const deltaX = e.clientX - startX
+    const deltaY = e.clientY - startY
+
+    if (!hasDragged) {
+      if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 5) {
+        setIsDragging(false)
+        try {
+          viewportRef.releasePointerCapture(e.pointerId)
+        } catch {}
+        return
+      }
+      if (Math.abs(deltaX) > 5) {
+        hasDragged = true
+      }
+    }
+
+    if (hasDragged) {
+      e.preventDefault()
+      const width = viewportRef.clientWidth
+      setDragOffset((deltaX / width) * 100)
+    }
+  }
+
+  const handlePointerUp = (e: PointerEvent) => {
+    if (!isDragging() || !viewportRef) return
+    setIsDragging(false)
+    setDragOffset(0)
+    try {
+      viewportRef.releasePointerCapture(e.pointerId)
+    } catch {}
+
+    if (hasDragged) {
+      const deltaX = e.clientX - startX
+      const width = viewportRef.clientWidth
+      const threshold = width * 0.15
+      if (deltaX < -threshold) {
+        next()
+      } else if (deltaX > threshold) {
+        prev()
+      }
+    }
+    hasDragged = false
+    startAutoplay()
+  }
+
+  const renderSlide = (slide: CarouselSlide) => (
+    <div
+      class={`${resolvedClasses().slide} rla-carousel-slide`}
+      data-slot="slide"
+      style="container-type: scroll-state; container-name: rla-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"
+          />
+        ) : null}
+        {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> : null}
+            {slide.description ? <p class="text-xs opacity-95 mt-1">{slide.description}</p> : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+
+  return (
+    <div data-autoplay={props.autoplay ? "true" : "false"} style="display: contents" {...rest}>
+      <div id={carouselId} class={resolvedClasses().root} data-slot="root">
+        <div
+          ref={(el) => (viewportRef = el)}
+          class={resolvedClasses().viewport}
+          data-slot="viewport"
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+        >
+          <div
+            ref={(el) => (containerRef = el)}
+            class={resolvedClasses().container}
+            data-slot="container"
+            style={{
+              transform: `translate3d(${-index() * 100 + dragOffset()}%, 0px, 0px)`,
+              transition: isDragging() && hasDragged ? "none" : SLIDE_TRANSITION
+            }}
+          >
+            {props.slides && props.slides.length > 0 ? (
+              <For each={props.slides}>{(slide) => renderSlide(slide)}</For>
+            ) : (
+              childrenContent.toArray().map((child) => (
+                <div
+                  class={`${resolvedClasses().slide} rla-carousel-slide`}
+                  data-slot="slide"
+                  style="container-type: scroll-state; container-name: rla-slide;"
+                >
+                  {child}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        <button
+          class={resolvedClasses().buttonPrev}
+          data-slot="prev-button"
+          type="button"
+          aria-label="Previous slide"
+          onClick={() => handleBtnClick(prev)}
+        >
+          <RLSIcon name="i-rl-chevronLeft" class="size-5" aria-hidden="true" />
+        </button>
+        <button
+          class={resolvedClasses().buttonNext}
+          data-slot="next-button"
+          type="button"
+          aria-label="Next slide"
+          onClick={() => handleBtnClick(next)}
+        >
+          <RLSIcon name="i-rl-chevronRight" class="size-5" aria-hidden="true" />
+        </button>
+
+        <Show when={dots().length > 0}>
+          <div class={resolvedClasses().dots} data-slot="dots">
+            <For each={dots()}>
+              {(i) => (
+                <button
+                  type="button"
+                  class={index() === i ? dotActiveClasses().dot : resolvedClasses().dot}
+                  data-slot="dot"
+                  aria-label={`Go to slide ${i + 1}`}
+                  onClick={() => handleBtnClick(() => goTo(i))}
+                />
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export default RLSCarousel

package/src/components/chart/RLSChart.tsx

@@ -0,0 +1,299 @@
+import { createMemo, For, Show, splitProps, type Component, type JSX } from "solid-js"
+import type { ChartProps, ChartDataPoint } from "./chart"
+import { chartTheme } from "./chart.theme"
+
+export interface RLSChartProps extends ChartProps {
+  children?: JSX.Element
+}
+
+const palette = [
+  "hsl(221 83% 53%)",
+  "hsl(262 83% 58%)",
+  "hsl(142 76% 36%)",
+  "hsl(32 95% 44%)",
+  "hsl(0 84% 60%)",
+  "hsl(187 85% 43%)"
+]
+
+const PIE_R = 80
+const PIE_CX = 100
+const PIE_CY = 100
+const DONUT_INNER_R = 45
+const LINE_W = 400
+const LINE_H = 160
+const LINE_PAD = 32
+
+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}`
+}
+
+const RLSChart: Component<RLSChartProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "type",
+    "data",
+    "title",
+    "height",
+    "color",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const data = createMemo(() => props.data ?? [])
+  const chartType = () => props.type ?? "bar"
+
+  const resolvedClasses = createMemo(() =>
+    chartTheme({
+      color: props.color ?? "primary",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const max = createMemo(() => {
+    const items = data()
+    return items.length > 0 ? Math.max(...items.map((d) => d.value)) : 1
+  })
+
+  const total = createMemo(() => data().reduce((sum, d) => sum + d.value, 0))
+
+  const getColor = (item: ChartDataPoint, index: number) => {
+    const res = item.color ?? palette[index % palette.length]
+    return res ?? "#000000"
+  }
+
+  const pieSlices = createMemo(() => {
+    let cursor = 0
+    return data().map((item, i) => {
+      const angle = (item.value / (total() || 1)) * 360
+      const start = cursor
+      const end = cursor + angle
+      cursor = end
+      return { item, i, start, end }
+    })
+  })
+
+  const linePoints = createMemo(() =>
+    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 = createMemo(() =>
+    linePoints()
+      .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
+      .join(" ")
+  )
+
+  const areaPath = createMemo(() => {
+    const pts = linePoints()
+    if (pts.length === 0) return ""
+    const last = pts[pts.length - 1]!
+    const first = pts[0]!
+    return linePath() + ` L ${last.x} ${LINE_H - LINE_PAD}` + ` L ${first.x} ${LINE_H - LINE_PAD} Z`
+  })
+
+  const gridLines = [0, 0.25, 0.5, 0.75, 1]
+
+  const id = `chart-${Math.random().toString(36).substring(2, 9)}`
+  const height = props.height ?? 280
+
+  return (
+    <>
+      <style>{`
+  .${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; }
+`}</style>
+
+      <div class={`${resolvedClasses().root}  ${id}`} data-slot="root" {...rest}>
+        {props.title ? (
+          <div class={resolvedClasses().title} data-slot="title">
+            {props.title}
+          </div>
+        ) : null}
+
+        {chartType() === "bar" ? (
+          <div class={resolvedClasses().container} data-slot="container">
+            <For each={data()}>
+              {(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 font-mono opacity-0 group-hover:opacity-100 transition-opacity">
+                      {item.value}
+                    </span>
+                    <div
+                      class={`${resolvedClasses().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={resolvedClasses().axis}>{item.label}</span>
+                  </div>
+                )
+              }}
+            </For>
+          </div>
+        ) : null}
+
+        {chartType() === "line" || chartType() === "area" ? (
+          <div class="relative w-full rla-chart-line-wrap">
+            <svg
+              class={resolvedClasses().svg}
+              viewBox={`0 0 ${LINE_W} ${LINE_H}`}
+              preserveAspectRatio="none"
+              aria-label={props.title ?? "Line chart"}
+            >
+              <For each={gridLines}>
+                {(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}
+                    />
+                  )
+                }}
+              </For>
+
+              <Show when={chartType() === "area"}>
+                <path d={areaPath()} fill={palette[0] ?? "currentColor"} fill-opacity={0.15} />
+              </Show>
+
+              <path
+                d={linePath()}
+                class={resolvedClasses().line}
+                stroke={palette[0] ?? "currentColor"}
+                stroke-width={2.5}
+              />
+
+              <For each={linePoints()}>
+                {(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>
+                )}
+              </For>
+
+              <For each={linePoints()}>
+                {(p) => (
+                  <text x={p.x} y={LINE_H - 4} text-anchor="middle" class={resolvedClasses().axis}>
+                    {p.d.label}
+                  </text>
+                )}
+              </For>
+            </svg>
+          </div>
+        ) : null}
+
+        {chartType() === "pie" || chartType() === "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={props.title ?? "Pie chart"}
+            >
+              <For each={pieSlices()}>
+                {({ 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>
+                  )
+                }}
+              </For>
+              <Show when={chartType() === "donut"}>
+                <circle cx={PIE_CX} cy={PIE_CY} r={DONUT_INNER_R} fill="var(--rl-neutral-50)" />
+              </Show>
+            </svg>
+
+            <div class="flex flex-col gap-1.5">
+              <For each={data()}>
+                {(item, i) => (
+                  <div class="flex items-center gap-2 text-xs text-muted">
+                    <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-highlighted">{item.value}</span>
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+        ) : null}
+
+        {props.children}
+
+        {(chartType() === "bar" || chartType() === "line" || chartType() === "area") &&
+        data().length > 0 ? (
+          <div class={resolvedClasses().legend} data-slot="legend">
+            <For each={data()}>
+              {(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>
+              )}
+            </For>
+          </div>
+        ) : null}
+      </div>
+    </>
+  )
+}
+
+export default RLSChart

package/src/components/chat/RLSChat.tsx

@@ -0,0 +1,27 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { ChatProps } from "./chat"
+import { chatTheme } from "./chat.theme"
+
+export interface RLSChatProps extends ChatProps {
+  children?: JSX.Element
+}
+
+const RLSChat: Component<RLSChatProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    chatTheme({
+      ui: props.ui,
+      class: props.class,
+      ...allProps
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSChat

package/src/components/chat-message/RLSChatMessage.tsx

@@ -0,0 +1,27 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { ChatMessageProps } from "./chat-message"
+import { chatMessageTheme } from "./chat-message.theme"
+
+export interface RLSChatMessageProps extends ChatMessageProps {
+  children?: JSX.Element
+}
+
+const RLSChatMessage: Component<RLSChatMessageProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    chatMessageTheme({
+      ui: props.ui,
+      class: props.class,
+      ...allProps
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSChatMessage

package/src/components/chat-messages/RLSChatMessages.tsx

@@ -0,0 +1,27 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { ChatMessagesProps } from "./chat-messages"
+import { chatMessagesTheme } from "./chat-messages.theme"
+
+export interface RLSChatMessagesProps extends ChatMessagesProps {
+  children?: JSX.Element
+}
+
+const RLSChatMessages: Component<RLSChatMessagesProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    chatMessagesTheme({
+      ui: props.ui,
+      class: props.class,
+      ...allProps
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSChatMessages

package/src/components/chat-palette/RLSChatPalette.tsx

@@ -0,0 +1,27 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { ChatPaletteProps } from "./chat-palette"
+import { chatPaletteTheme } from "./chat-palette.theme"
+
+export interface RLSChatPaletteProps extends ChatPaletteProps {
+  children?: JSX.Element
+}
+
+const RLSChatPalette: Component<RLSChatPaletteProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    chatPaletteTheme({
+      ui: props.ui,
+      class: props.class,
+      ...allProps
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSChatPalette

package/src/components/chat-prompt/RLSChatPrompt.tsx

@@ -0,0 +1,27 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { ChatPromptProps } from "./chat-prompt"
+import { chatPromptTheme } from "./chat-prompt.theme"
+
+export interface RLSChatPromptProps extends ChatPromptProps {
+  children?: JSX.Element
+}
+
+const RLSChatPrompt: Component<RLSChatPromptProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    chatPromptTheme({
+      ui: props.ui,
+      class: props.class,
+      ...allProps
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSChatPrompt