@rimelight/ui 0.0.46 → 0.0.48

package/src/components/theme-selector/RLSThemeSelector.tsx

@@ -0,0 +1,131 @@
+import {
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { ThemeSelectorProps } from "./theme-selector"
+import { themeSelectorTheme } from "./theme-selector.theme"
+import RLSSelect from "../select/RLSSelect"
+import RLSIcon from "../icon/RLSIcon"
+import { defineShortcuts } from "../../shortcuts"
+
+export interface RLSThemeSelectorProps extends ThemeSelectorProps {
+  children?: JSX.Element
+  onChange?: (theme: string) => void
+}
+
+const themeItems = [
+  { label: "System", value: "system", icon: "i-lucide-laptop" },
+  { label: "Light", value: "light", icon: "i-rl-sun" },
+  { label: "Dark", value: "dark", icon: "i-rl-moon" }
+]
+
+const RLSThemeSelector: Component<RLSThemeSelectorProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "mode",
+    "size",
+    "theme",
+    "ui",
+    "class",
+    "children",
+    "onChange"
+  ])
+
+  const [currentPreference, setCurrentPreference] = createSignal<string>("system")
+
+  const getPreference = () => {
+    if (typeof localStorage === "undefined") return "system"
+    const stored = localStorage.getItem("theme")
+    return stored === "system" || stored === "light" || stored === "dark" ? stored : "system"
+  }
+
+  const applyTheme = (next: string) => {
+    setCurrentPreference(next)
+    if (typeof document !== "undefined") {
+      const resolved =
+        next === "system"
+          ? typeof window !== "undefined" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light"
+          : next
+      document.documentElement.setAttribute("data-theme", resolved)
+      localStorage.setItem("theme", next)
+    }
+    props.onChange?.(next)
+  }
+
+  onMount(() => {
+    const pref = getPreference()
+    applyTheme(pref)
+
+    const cycle = () => {
+      const cur = currentPreference()
+      const next = cur === "system" ? "light" : cur === "light" ? "dark" : "system"
+      applyTheme(next)
+    }
+
+    const cleanupShortcut = defineShortcuts({
+      meta_alt_t: {
+        handler: cycle,
+        label: "Cycle Theme",
+        description: "Cycle between system, light, and dark theme mode",
+        category: "system"
+      }
+    })
+
+    onCleanup(() => cleanupShortcut())
+  })
+
+  const mode = () => props.mode || "select"
+  const size = () => props.size || "md"
+
+  const resolvedClasses = createMemo(() =>
+    themeSelectorTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const activeIcon = () => {
+    const pref = currentPreference()
+    if (pref === "light") return "i-rl-sun"
+    if (pref === "dark") return "i-rl-moon"
+    return "i-lucide-laptop"
+  }
+
+  return (
+    <div
+      class={resolvedClasses().root}
+      data-theme-selector
+      data-mode={mode()}
+      data-theme={props.theme}
+      data-theme-preference={currentPreference()}
+      {...rest}
+    >
+      <div class={resolvedClasses().wrapper}>
+        <RLSSelect
+          items={themeItems}
+          value={currentPreference()}
+          onChange={(e) => applyTheme(e.currentTarget.value)}
+          size={size() as any}
+          variant={mode() === "icon" ? "icon" : "default"}
+          aria-label="Toggle theme"
+          class={resolvedClasses().select}
+          leading={
+            <span class="flex items-center">
+              <RLSIcon name={activeIcon()} class="size-4" />
+            </span>
+          }
+        />
+      </div>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSThemeSelector

package/src/components/theme-selector/theme-selector.theme.ts

@@ -1,12 +1,10 @@
 import { defineTheme } from "../../resolver"
 
 export const themeSelectorTheme = defineTheme("theme-selector", {
-  slots: ["root", "sun", "moon"],
+  slots: ["root", "wrapper", "select"],
   base: {
-    root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
-    sun: "rla-theme-sun w-5 h-5 text-current",
-    moon: "rla-theme-moon w-5 h-5 text-current"
-  },
-  variants: {},
-  defaultVariants: {}
+    root: "inline-flex flex-col gap-1.5",
+    wrapper: "relative inline-block",
+    select: ""
+  }
 })

package/src/components/theme-selector/theme-selector.ts

@@ -1,8 +1,18 @@
 export interface ThemeSelectorProps {
   /**
-   * The size of the button.
+   * The display mode of the theme selector.
+   *
+   * @default "select"
+   */
+  mode?: "select" | "icon"
+  /**
+   * The size of the select/button.
    */
   size?: "xs" | "sm" | "md" | "lg" | "xl"
+  /**
+   * Theme variant/mode.
+   */
+  theme?: "light" | "dark"
   /**
    * Slot-specific CSS class overrides.
    */

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/RLAToast.astro

@@ -31,7 +31,7 @@ const variantIcons: Record<string, string> = {
   info: "i-rl-info",
 }
 
-const icon = variantIcons[variant] ?? variantIcons.default!
+const icon = variantIcons[variant] ?? variantIcons["default"]!
 const isError = variant === "error"
 ---
 
@@ -102,7 +102,7 @@ const isError = variant === "error"
     if (!dismissable) return;
 
     const close = toast.querySelector("[data-toast-close]");
-    const duration = parseInt(toast.dataset.duration ?? "6000", 10);
+    const duration = parseInt(toast.dataset["duration"] ?? "6000", 10);
     let timerId: ReturnType<typeof setTimeout> | null = null;
     let startTime = Date.now();
     let remaining = duration;

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