@rimelight/ui 0.0.47 → 0.0.48

package/src/components/timeline/RLSTimeline.tsx

@@ -0,0 +1,171 @@
+import { createMemo, For, splitProps, type Component, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { TimelineProps, TimelineItem } from "./timeline"
+import { timelineTheme } from "./timeline.theme"
+import RLSAvatar from "../avatar/RLSAvatar"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSTimelineProps extends TimelineProps {
+  children?: JSX.Element
+  indicator?: (ctx: { item: TimelineItem; index: number }) => JSX.Element
+  wrapper?: (ctx: { item: TimelineItem; index: number }) => JSX.Element
+}
+
+const RLSTimeline: Component<RLSTimelineProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "as",
+    "items",
+    "size",
+    "color",
+    "orientation",
+    "valueKey",
+    "defaultValue",
+    "modelValue",
+    "reverse",
+    "ui",
+    "class",
+    "children",
+    "indicator",
+    "wrapper"
+  ])
+
+  const items = (): TimelineItem[] => props.items ?? []
+  const valueKey = (): string => props.valueKey ?? "value"
+  const reverse = (): boolean => props.reverse === true
+  const orientation = (): string => props.orientation ?? "vertical"
+
+  const getItemValue = (item: TimelineItem, index: number): string | number =>
+    item[valueKey()] !== undefined ? item[valueKey()] : index
+
+  const getItemState = (_item: TimelineItem, index: number): "active" | "completed" | undefined => {
+    const activeVal = props.modelValue !== undefined ? props.modelValue : props.defaultValue
+    if (activeVal === undefined) return undefined
+
+    let currentIndex = -1
+    if (items().length > 0) {
+      if (typeof activeVal === "string") {
+        currentIndex = items().findIndex((i) => getItemValue(i, items().indexOf(i)) === activeVal)
+      } else if (typeof activeVal === "number") {
+        currentIndex = reverse() ? items().length - 1 - activeVal : activeVal
+      }
+    }
+
+    if (currentIndex === -1) return undefined
+    if (index === currentIndex) return "active"
+    if (reverse()) return index > currentIndex ? "completed" : undefined
+    return index < currentIndex ? "completed" : undefined
+  }
+
+  const resolvedClasses = createMemo(() =>
+    timelineTheme({
+      size: props.size ?? "md",
+      color: props.color ?? "primary",
+      orientation: props.orientation ?? "vertical",
+      reverse: props.reverse ?? false,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <Dynamic
+      component={props.as || "div"}
+      data-slot="root"
+      class={resolvedClasses().root}
+      data-orientation={orientation()}
+      {...rest}
+    >
+      {items().length > 0 ? (
+        <For each={items()}>
+          {(item, index) => {
+            const state = getItemState(item, index())
+            const isLast = index() === items().length - 1
+            const avatar =
+              typeof item.avatar === "object" && item.avatar !== null ? item.avatar : undefined
+
+            return (
+              <div
+                data-slot="item"
+                class={`${resolvedClasses().item}  ${item.ui?.item || ""}  ${item.class || ""}`}
+                data-state={state}
+              >
+                <div
+                  data-slot="container"
+                  class={`${resolvedClasses().container}  ${item.ui?.container || ""}`}
+                >
+                  <RLSAvatar
+                    size={props.size ?? "md"}
+                    src={avatar?.src}
+                    alt={avatar?.alt}
+                    {...(avatar ? avatar : {})}
+                    data-slot="indicator"
+                    class={`${resolvedClasses().indicator}  ${item.ui?.indicator || ""}`}
+                    ui={{
+                      icon: "text-highlighted group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted",
+                      fallback:
+                        "text-highlighted group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted"
+                    }}
+                  >
+                    {props.indicator ? (
+                      props.indicator({ item, index: index() })
+                    ) : item.icon ? (
+                      <RLSIcon name={item.icon} class="text-inherit" />
+                    ) : null}
+                  </RLSAvatar>
+
+                  {!isLast ? (
+                    <div
+                      data-slot="separator"
+                      class={`${resolvedClasses().separator}  ${item.ui?.separator || ""}`}
+                      data-orientation={orientation()}
+                    />
+                  ) : null}
+                </div>
+
+                <div
+                  data-slot="wrapper"
+                  class={`${resolvedClasses().wrapper}  ${item.ui?.wrapper || ""}`}
+                >
+                  {props.wrapper ? (
+                    props.wrapper({ item, index: index() })
+                  ) : (
+                    <>
+                      {item.date ? (
+                        <div
+                          data-slot="date"
+                          class={`${resolvedClasses().date}  ${item.ui?.date || ""}`}
+                        >
+                          {item.date}
+                        </div>
+                      ) : null}
+                      {item.title ? (
+                        <div
+                          data-slot="title"
+                          class={`${resolvedClasses().title}  ${item.ui?.title || ""}`}
+                        >
+                          {item.title}
+                        </div>
+                      ) : null}
+                      {item.description ? (
+                        <div
+                          data-slot="description"
+                          class={`${resolvedClasses().description}  ${item.ui?.description || ""}`}
+                        >
+                          {item.description}
+                        </div>
+                      ) : null}
+                    </>
+                  )}
+                </div>
+              </div>
+            )
+          }}
+        </For>
+      ) : props.children ? (
+        props.children
+      ) : null}
+    </Dynamic>
+  )
+}
+
+export default RLSTimeline

package/src/components/toast/RLSToast.tsx

@@ -0,0 +1,179 @@
+import {
+  createMemo,
+  createSignal,
+  onMount,
+  onCleanup,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { ToastProps } from "./toast"
+import { toastTheme } from "./toast.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSToastProps extends ToastProps {
+  onDismiss?: () => void
+  children?: JSX.Element
+  titleSlot?: JSX.Element
+  descriptionSlot?: JSX.Element
+  actionsSlot?: JSX.Element
+}
+
+const variantIcons: Record<string, string> = {
+  default: "i-rl-bell",
+  error: "i-rl-circleCheck",
+  success: "i-rl-circleCheck",
+  warning: "i-rl-alertTriangle",
+  info: "i-rl-info"
+}
+
+const RLSToast: Component<RLSToastProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "title",
+    "description",
+    "variant",
+    "actionLabel",
+    "duration",
+    "dismissable",
+    "onDismiss",
+    "ui",
+    "class",
+    "children",
+    "titleSlot",
+    "descriptionSlot",
+    "actionsSlot"
+  ])
+
+  const [leaving, setLeaving] = createSignal(false)
+  let rootRef: HTMLDivElement | undefined
+  let timerId: ReturnType<typeof setTimeout> | null = null
+  let dismissTimerId: ReturnType<typeof setTimeout> | undefined
+  let startTime = 0
+  let remaining = props.duration ?? 6000
+
+  const isError = () => props.variant === "error"
+
+  const resolvedClasses = createMemo(() =>
+    toastTheme({
+      variant: ["success", "error", "warning", "info"].includes(props.variant ?? "")
+        ? (props.variant as "success" | "error" | "warning" | "info")
+        : "default",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const icon = () => variantIcons[props.variant ?? ""] ?? variantIcons["default"]!
+
+  const dismiss = () => {
+    if (leaving()) return
+    setLeaving(true)
+    if (props.onDismiss) {
+      if (dismissTimerId !== undefined) clearTimeout(dismissTimerId)
+      dismissTimerId = setTimeout(props.onDismiss, 300)
+    }
+  }
+
+  const startTimer = () => {
+    const duration = props.duration ?? 6000
+    if (duration > 0 && remaining > 0 && timerId === null) {
+      startTime = Date.now()
+      timerId = setTimeout(dismiss, remaining)
+    }
+  }
+
+  const pauseTimer = () => {
+    if (timerId !== null) {
+      clearTimeout(timerId)
+      timerId = null
+      remaining -= Date.now() - startTime
+    }
+  }
+
+  onMount(() => {
+    const root = rootRef
+    if (!root) return
+
+    const duration = props.duration ?? 6000
+    if (duration > 0) {
+      startTimer()
+      root.addEventListener("mouseenter", pauseTimer)
+      root.addEventListener("mouseleave", startTimer)
+      root.addEventListener("focusin", pauseTimer)
+      root.addEventListener("focusout", (e) => {
+        if (!root.contains(e.relatedTarget as Node)) startTimer()
+      })
+    }
+
+    onCleanup(() => {
+      if (timerId !== null) clearTimeout(timerId)
+      if (dismissTimerId !== undefined) clearTimeout(dismissTimerId)
+      root.removeEventListener("mouseenter", pauseTimer)
+      root.removeEventListener("mouseleave", startTimer)
+      root.removeEventListener("focusin", pauseTimer)
+    })
+  })
+
+  return (
+    <div
+      ref={(el) => (rootRef = el)}
+      class={`${resolvedClasses().root}  ${leaving() ? "opacity-0 translate-y-2 pointer-events-none" : ""}`}
+      data-slot="root"
+      data-toast
+      data-duration={props.duration ?? 6000}
+      data-dismissable={(props.dismissable !== false).toString()}
+      role={isError() ? "alert" : "status"}
+      aria-live={isError() ? "assertive" : "polite"}
+      aria-atomic="true"
+      tabindex="-1"
+      {...rest}
+    >
+      <RLSIcon name={icon()} class="size-4 shrink-0 mt-0.5" aria-hidden="true" />
+
+      <div class="flex flex-col gap-0.5 flex-1 min-w-0">
+        {props.titleSlot || props.title ? (
+          <div class={resolvedClasses().title} data-slot="title">
+            {props.titleSlot ? props.titleSlot : props.title}
+          </div>
+        ) : null}
+        {props.descriptionSlot || props.description ? (
+          <div class={resolvedClasses().description} data-slot="description">
+            {props.descriptionSlot ? props.descriptionSlot : props.description}
+          </div>
+        ) : null}
+        {props.children}
+        {props.actionsSlot || props.actionLabel ? (
+          <div class="flex items-center justify-end gap-2 mt-3" data-slot="actions">
+            {props.actionsSlot ? (
+              props.actionsSlot
+            ) : (
+              <button
+                type="button"
+                class={resolvedClasses().action}
+                data-slot="action"
+                data-toast-action
+              >
+                {props.actionLabel}
+              </button>
+            )}
+          </div>
+        ) : null}
+      </div>
+
+      {props.dismissable !== false && (
+        <button
+          type="button"
+          class={resolvedClasses().close}
+          data-slot="close"
+          data-toast-close
+          aria-label="Dismiss notification"
+          onClick={dismiss}
+        >
+          <RLSIcon name="i-rl-close" class="size-3.5" aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default RLSToast

package/src/components/toaster/RLSToaster.tsx

@@ -0,0 +1,82 @@
+import { createSignal, For, onMount, onCleanup, splitProps, type Component } from "solid-js"
+import { toasts, removeToast, addToast } from "../toast/store"
+import type { ToastItem } from "../toast/store"
+import RLSToast from "../toast/RLSToast"
+
+export interface RLSToasterProps {
+  class?: any
+  [key: string]: unknown
+}
+
+const RLSToaster: Component<RLSToasterProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["class"])
+  const [list, setList] = createSignal<ToastItem[]>([])
+
+  onMount(() => {
+    const unsubscribe = toasts.subscribe((items) => setList([...items]))
+    onCleanup(unsubscribe)
+
+    const stored = sessionStorage.getItem("pending_toast")
+    if (stored) {
+      sessionStorage.removeItem("pending_toast")
+      try {
+        const parsed = JSON.parse(stored)
+        if (parsed && parsed.title) {
+          addToast(parsed)
+        }
+      } catch {}
+    }
+
+    const url = new URL(window.location.href)
+    let toastTitle = url.searchParams.get("toast_title")
+    const toastDesc = url.searchParams.get("toast_desc") ?? undefined
+    let toastVariant = url.searchParams.get("toast_variant") || "success"
+
+    if (!toastTitle) {
+      if (url.searchParams.has("signed_in")) {
+        toastTitle = "Signed in successfully"
+      } else if (url.searchParams.has("new")) {
+        toastTitle = "Account created successfully"
+      }
+    }
+
+    if (toastTitle) {
+      url.searchParams.delete("toast_title")
+      url.searchParams.delete("toast_desc")
+      url.searchParams.delete("toast_variant")
+      url.searchParams.delete("signed_in")
+      url.searchParams.delete("new")
+      const cleanUrl = url.pathname + (url.search ? url.search : "")
+      window.history.replaceState({}, "", cleanUrl)
+
+      const payload: Record<string, unknown> = { title: toastTitle, variant: toastVariant }
+      if (toastDesc) payload["description"] = toastDesc
+      addToast(payload as Omit<ToastItem, "id">)
+    }
+  })
+
+  return (
+    <div
+      id="rla-toaster-container"
+      class={`fixed bottom-5 right-5 z-[200] flex flex-col gap-2 max-w-sm w-full pointer-events-none ${props.class || ""}`}
+      aria-live="polite"
+      aria-atomic="false"
+      role="status"
+      {...rest}
+    >
+      <For each={list()}>
+        {(item) => (
+          <RLSToast
+            title={item.title}
+            {...(item.description ? { description: item.description } : {})}
+            {...(item.variant ? { variant: item.variant } : {})}
+            {...(item.duration ? { duration: item.duration } : {})}
+            onDismiss={() => removeToast(item.id)}
+          />
+        )}
+      </For>
+    </div>
+  )
+}
+
+export default RLSToaster

package/src/components/tooltip/RLSTooltip.tsx

@@ -0,0 +1,48 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { TooltipProps } from "./tooltip"
+import { tooltipTheme } from "./tooltip.theme"
+
+export interface RLSTooltipProps extends TooltipProps {
+  children?: JSX.Element
+  contentSlot?: JSX.Element
+}
+
+const RLSTooltip: Component<RLSTooltipProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "content",
+    "placement",
+    "ui",
+    "class",
+    "children",
+    "contentSlot"
+  ])
+
+  const placement = () => props.placement ?? "top"
+
+  const resolvedClasses = createMemo(() =>
+    tooltipTheme({
+      placement: placement(),
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div
+      class={resolvedClasses().root}
+      data-slot="tooltip-container"
+      data-placement={placement()}
+      {...rest}
+    >
+      <div class={resolvedClasses().trigger} data-slot="trigger" tabIndex={0}>
+        {props.children}
+      </div>
+
+      <div class={resolvedClasses().content} data-slot="content" role="tooltip">
+        {props.contentSlot !== undefined ? props.contentSlot : props.content}
+      </div>
+    </div>
+  )
+}
+
+export default RLSTooltip

package/src/components/tour/RLSTour.tsx

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

package/src/components/tree/RLSTree.tsx

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

package/src/components/user/RLSUser.tsx

@@ -0,0 +1,26 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { UserProps } from "./user"
+import { userTheme } from "./user.theme"
+
+export interface RLSUserProps extends UserProps {
+  children?: JSX.Element
+}
+
+const RLSUser: Component<RLSUserProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const classes = createMemo(() =>
+    userTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={classes()["root"]} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSUser

package/src/components/video/RLAVideo.astro

@@ -131,10 +131,12 @@ const ariaLabel = isPlayable ? "Play YouTube Video" : "YouTube Video Unavailable
 
 <div
     class:list={[classes.root]}
+    data-slot="root"
     {...rest}
 >
   <button
     type="button"
+    data-slot="trigger"
     data-youtube-trigger
     aria-label={ariaLabel}
     data-embed-url={isPlayable ? embedUrl : undefined}
@@ -150,10 +152,11 @@ const ariaLabel = isPlayable ? "Play YouTube Video" : "YouTube Video Unavailable
       height="720"
       loading="lazy"
       class:list={[classes.image]}
+      data-slot="image"
     />
 
     <slot name="icon">
-      <RLAIcon name={icon} class={classes.icon} aria-hidden="true" />
+      <RLAIcon name={icon} class={classes.icon} data-slot="icon" aria-hidden="true" />
     </slot>
   </button>
 </div>