@rimelight/ui 0.0.47 → 0.0.49

package/src/components/locale-selector/RLSLocaleSelector.tsx

@@ -0,0 +1,178 @@
+import {
+  createMemo,
+  createSignal,
+  splitProps,
+  onMount,
+  onCleanup,
+  For,
+  Show,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { LocaleSelectorProps, LocaleItem } from "./locale-selector"
+import { localeSelectorTheme } from "./locale-selector.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSLocaleSelectorProps extends LocaleSelectorProps {
+  children?: JSX.Element
+  labelSlot?: JSX.Element
+  onSelect?: (item: LocaleItem) => void
+}
+
+const getLocaleDisplayName = (localeCode: string): string => {
+  try {
+    const formatter = new Intl.DisplayNames([localeCode], { type: "language" })
+    const nativeName = formatter.of(localeCode)
+    return nativeName
+      ? nativeName.charAt(0).toUpperCase() + nativeName.slice(1)
+      : localeCode.toUpperCase()
+  } catch {
+    return localeCode.toUpperCase()
+  }
+}
+
+const RLSLocaleSelector: Component<RLSLocaleSelectorProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "locales",
+    "currentLocale",
+    "variant",
+    "size",
+    "theme",
+    "ui",
+    "class",
+    "children",
+    "labelSlot",
+    "onSelect"
+  ])
+
+  const [isOpen, setIsOpen] = createSignal(false)
+  let containerRef: HTMLDivElement | undefined
+
+  onMount(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (isOpen() && containerRef && !containerRef.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    document.addEventListener("click", handleOutsideClick)
+    onCleanup(() => document.removeEventListener("click", handleOutsideClick))
+  })
+
+  const currentCode = (): string => props.currentLocale ?? "en"
+
+  const processedLocales = createMemo<LocaleItem[]>(() =>
+    (props.locales ?? []).map((item) =>
+      typeof item === "string"
+        ? { code: item, label: getLocaleDisplayName(item) }
+        : { ...item, label: item.label || getLocaleDisplayName(item.code) }
+    )
+  )
+
+  const items = createMemo(() =>
+    processedLocales().map((item) => {
+      let targetUrl: string
+      const search = typeof window !== "undefined" ? window.location.search : ""
+      const pathname = typeof window !== "undefined" ? window.location.pathname : "/"
+      if (item.href !== undefined && item.href !== null) {
+        targetUrl = item.href + (item.href.includes("?") ? "" : search)
+      } else {
+        const knownCodes = new Set(processedLocales().map((l) => l.code))
+        const segments = pathname.split("/").filter(Boolean)
+        const firstIsLocale = segments.length > 0 && knownCodes.has(segments[0]!)
+
+        if (firstIsLocale) {
+          segments[0] = item.code
+          targetUrl = `/${segments.join("/")}${pathname.endsWith("/") ? "/" : ""}${search}`
+        } else if (segments.length > 0) {
+          targetUrl = `/${item.code}/${segments.join("/")}${pathname.endsWith("/") ? "/" : ""}${search}`
+        } else {
+          targetUrl = `/${item.code}/${search}`
+        }
+      }
+      return { label: item.label, value: targetUrl, code: item.code }
+    })
+  )
+
+  const currentItem = createMemo(() => items().find((item) => item.code === currentCode()))
+
+  const resolvedClasses = createMemo(() =>
+    localeSelectorTheme({
+      variant: props.variant ?? "default",
+      size: props.size ?? "md",
+      theme: props.theme,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const selectLocale = (item: { label: string; value: string; code: string }) => {
+    setIsOpen(false)
+    props.onSelect?.({ label: item.label, code: item.code, href: item.value })
+    if (item.value) {
+      window.location.href = item.value
+    }
+  }
+
+  return (
+    <div
+      ref={(el) => (containerRef = el)}
+      class={resolvedClasses().root}
+      data-slot="root"
+      data-theme={props.theme}
+      {...rest}
+    >
+      <Show when={props.labelSlot}>
+        <label class={resolvedClasses().label} data-slot="label">
+          {props.labelSlot}
+        </label>
+      </Show>
+
+      <div class={resolvedClasses().wrapper} data-slot="wrapper">
+        <button
+          type="button"
+          class={`${resolvedClasses().select}  flex items-center justify-between gap-2 text-left`}
+          data-slot="trigger"
+          aria-haspopup="listbox"
+          aria-expanded={isOpen() ? "true" : "false"}
+          onClick={() => setIsOpen(!isOpen())}
+        >
+          <span class="truncate">{currentItem()?.label || currentCode()}</span>
+          <span class={resolvedClasses().iconWrapper}>
+            <RLSIcon name="chevronDown" size="sm" aria-hidden="true" />
+          </span>
+        </button>
+
+        <Show when={isOpen()}>
+          <div
+            class="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-default bg-default py-1 shadow-xl"
+            data-slot="options"
+            role="listbox"
+          >
+            <For each={items()}>
+              {(item) => {
+                const selected = item.code === currentCode()
+                return (
+                  <button
+                    type="button"
+                    class={`${resolvedClasses().option}  flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-accented/50 ${selected ? "font-medium" : ""}`}
+                    data-slot="option"
+                    role="option"
+                    aria-selected={selected ? "true" : "false"}
+                    onClick={() => selectLocale(item)}
+                  >
+                    <span class="truncate">{item.label}</span>
+                    <Show when={selected}>
+                      <RLSIcon name="check" size="xs" class="shrink-0" aria-hidden="true" />
+                    </Show>
+                  </button>
+                )
+              }}
+            </For>
+          </div>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export default RLSLocaleSelector

package/src/components/logo/RLALogo.astro

@@ -6,6 +6,7 @@ import uiConfig from "virtual:rimelight/ui"
 const {
   variant = "logomark",
   mode,
+  theme,
   href = "/",
   alt,
   ...rest
@@ -57,24 +58,29 @@ const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode;
   href={href}
   aria-label={alt || variant}
   data-slot="root"
+  data-theme={theme}
+  style={theme ? `color-scheme: ${theme};` : undefined}
   {...rest}
 >
   {logoSrc ? (
     isIcon ? (
       <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
     ) : hasAutoMode ? (
-      <>
+      <span
+        class="rla-logo-image size-full flex items-center justify-center shrink-0"
+        style={`--rla-logo-light: url('${lightSrc}'); --rla-logo-dark: url('${darkSrc}');`}
+      >
         <img
           src={lightSrc}
           alt={alt || ""}
-          class="size-full block object-contain shrink-0 dark:hidden"
+          class="rla-logo-light size-full block object-contain shrink-0"
         />
         <img
           src={darkSrc}
           alt={alt || ""}
-          class="size-full hidden object-contain shrink-0 dark:block"
+          class="rla-logo-dark size-full hidden object-contain shrink-0"
         />
-      </>
+      </span>
     ) : (
       <img
         src={logoSrc}
@@ -86,3 +92,62 @@ const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode;
     <slot />
   )}
 </a>
+
+<style>
+  :global(:root[data-theme="dark"]) .rla-logo-light,
+  :global([data-theme="dark"]) .rla-logo-light,
+  :global([data-theme="dark"]) .rla-logo-image .rla-logo-light,
+  :global(.rla-logo-image[data-theme="dark"]) .rla-logo-light {
+    display: none !important;
+  }
+
+  :global(:root[data-theme="dark"]) .rla-logo-dark,
+  :global([data-theme="dark"]) .rla-logo-dark,
+  :global([data-theme="dark"]) .rla-logo-image .rla-logo-dark,
+  :global(.rla-logo-image[data-theme="dark"]) .rla-logo-dark {
+    display: block !important;
+  }
+
+  :global(:root[data-theme="light"]) .rla-logo-light,
+  :global([data-theme="light"]) .rla-logo-light,
+  :global([data-theme="light"]) .rla-logo-image .rla-logo-light,
+  :global(.rla-logo-image[data-theme="light"]) .rla-logo-light {
+    display: block !important;
+  }
+
+  :global(:root[data-theme="light"]) .rla-logo-dark,
+  :global([data-theme="light"]) .rla-logo-dark,
+  :global([data-theme="light"]) .rla-logo-image .rla-logo-dark,
+  :global(.rla-logo-image[data-theme="light"]) .rla-logo-dark {
+    display: none !important;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :global(:root:not([data-theme="light"])) .rla-logo-light {
+      display: none !important;
+    }
+    :global(:root:not([data-theme="light"])) .rla-logo-dark {
+      display: block !important;
+    }
+    :global(:root:not([data-theme="light"])) :global([data-theme="light"]) .rla-logo-light {
+      display: block !important;
+    }
+    :global(:root:not([data-theme="light"])) :global([data-theme="light"]) .rla-logo-dark {
+      display: none !important;
+    }
+  }
+
+  @supports (background-image: light-dark(none, none)) {
+    .rla-logo-image {
+      background-image: light-dark(var(--rla-logo-light), var(--rla-logo-dark));
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    .rla-logo-image > .rla-logo-light,
+    .rla-logo-image > .rla-logo-dark {
+      opacity: 0 !important;
+      visibility: hidden !important;
+    }
+  }
+</style>

package/src/components/logo/RLSLogo.tsx

@@ -0,0 +1,129 @@
+import { createMemo, Show, splitProps, type Component, type JSX } from "solid-js"
+import type { LogoProps } from "./logo"
+import { logoTheme } from "./logo.theme"
+import uiConfig from "virtual:rimelight/ui"
+
+export interface RLSLogoProps extends LogoProps {
+  children?: JSX.Element
+  src?: string
+}
+
+const RLSLogo: Component<RLSLogoProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "variant",
+    "mode",
+    "theme",
+    "href",
+    "alt",
+    "src",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const variant = () => props.variant || "logomark"
+  const href = () => props.href ?? "/"
+
+  const logoInfo = createMemo(() => {
+    if (props.src) {
+      return { logoSrc: props.src, darkSrc: null, lightSrc: null }
+    }
+
+    const cfgLogos = (uiConfig as any)?.logos
+    const logoVariant = cfgLogos?.[variant()]
+
+    let logoSrc: string | null = null
+    let darkSrc: string | null = null
+    let lightSrc: string | null = null
+
+    if (logoVariant && typeof logoVariant === "object") {
+      if (props.mode) {
+        logoSrc = logoVariant[props.mode] || logoVariant.color
+      } else {
+        logoSrc = logoVariant.color || logoVariant.black || logoVariant.white
+        darkSrc = logoVariant.white || logoVariant.color
+        lightSrc = logoVariant.black || logoVariant.color
+      }
+    } else if (typeof logoVariant === "string") {
+      logoSrc = logoVariant
+    }
+
+    return { logoSrc, darkSrc, lightSrc }
+  })
+
+  const startsWithUrlPrefix = () => {
+    const s = logoInfo().logoSrc
+    return s && (s.startsWith("http") || s.startsWith("/") || s.startsWith("."))
+  }
+
+  const isIcon = () => {
+    const s = logoInfo().logoSrc
+    return s && !startsWithUrlPrefix() && (s.includes(":") || s.startsWith("i-"))
+  }
+
+  const hasAutoMode = () => {
+    const { darkSrc, lightSrc } = logoInfo()
+    return darkSrc && lightSrc && darkSrc !== lightSrc && !props.mode
+  }
+
+  const resolvedClasses = createMemo(() =>
+    logoTheme({
+      variant: variant(),
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <a
+      class={resolvedClasses().root}
+      href={href()}
+      aria-label={props.alt || variant()}
+      data-slot="root"
+      data-theme={props.theme}
+      style={props.theme ? { "color-scheme": props.theme } : undefined}
+      {...rest}
+    >
+      <Show when={logoInfo().logoSrc} fallback={props.children}>
+        <Show
+          when={!isIcon()}
+          fallback={
+            <span class={`${logoInfo().logoSrc} size-full block shrink-0`} aria-hidden="true" />
+          }
+        >
+          <Show
+            when={!hasAutoMode()}
+            fallback={
+              <span
+                class="rla-logo-image size-full flex items-center justify-center shrink-0"
+                style={{
+                  "--rla-logo-light": `url('${logoInfo().lightSrc}')`,
+                  "--rla-logo-dark": `url('${logoInfo().darkSrc}')`
+                }}
+              >
+                <img
+                  src={logoInfo().lightSrc || ""}
+                  alt={props.alt || ""}
+                  class="rla-logo-light size-full block object-contain shrink-0"
+                />
+                <img
+                  src={logoInfo().darkSrc || ""}
+                  alt={props.alt || ""}
+                  class="rla-logo-dark size-full hidden object-contain shrink-0"
+                />
+              </span>
+            }
+          >
+            <img
+              src={logoInfo().logoSrc || ""}
+              alt={props.alt || ""}
+              class="size-full block object-contain shrink-0"
+            />
+          </Show>
+        </Show>
+      </Show>
+    </a>
+  )
+}
+
+export default RLSLogo

package/src/components/main/RLSMain.tsx

@@ -0,0 +1,40 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { MainProps } from "./main"
+import { mainTheme } from "./main.theme"
+
+export interface RLSMainProps extends MainProps {
+  children?: JSX.Element
+}
+
+const RLSMain: Component<RLSMainProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["as", "ui", "class", "children"])
+
+  const tag = () => props.as ?? "main"
+
+  const resolvedClasses = createMemo(() =>
+    mainTheme({
+      hasContent: props.children !== undefined,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <Dynamic
+      component={tag()}
+      class={`${resolvedClasses().root}  rla-main-container`}
+      data-slot="main"
+      {...rest}
+    >
+      {props.children}
+      <style>{`
+        .rla-main-container {
+          padding-top: var(--rl-total-header-height, 4rem);
+        }
+      `}</style>
+    </Dynamic>
+  )
+}
+
+export default RLSMain

package/src/components/marquee/RLSMarquee.tsx

@@ -0,0 +1,80 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { MarqueeProps } from "./marquee"
+import { marqueeTheme } from "./marquee.theme"
+
+export interface RLSMarqueeProps extends MarqueeProps {
+  children?: JSX.Element
+}
+
+const MARQUEE_KEYFRAMES = `
+@keyframes marquee-left {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+@keyframes marquee-right {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+@keyframes marquee-up {
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+}
+@keyframes marquee-down {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+.animate-marquee,
+.animate-marquee-left {
+  animation: marquee-left 30s linear infinite;
+}
+.animate-marquee-right {
+  animation: marquee-right 30s linear infinite;
+}
+.animate-marquee-up {
+  animation: marquee-up 30s linear infinite;
+}
+.animate-marquee-down {
+  animation: marquee-down 30s linear infinite;
+}
+`
+
+const RLSMarquee: Component<RLSMarqueeProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "speed",
+    "direction",
+    "pauseOnHover",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    marqueeTheme({
+      direction: props.direction ?? "left",
+      pauseOnHover: props.pauseOnHover ?? true,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const trackStyle = () => ({ "animation-duration": `${props.speed ?? 40}s` })
+
+  return (
+    <div class={resolvedClasses().root} data-slot="marquee-root" {...rest}>
+      <div class={resolvedClasses().track} data-slot="track" style={trackStyle()}>
+        {props.children}
+      </div>
+      <div
+        class={resolvedClasses().track}
+        data-slot="track"
+        style={trackStyle()}
+        aria-hidden="true"
+      >
+        {props.children}
+      </div>
+      <style>{MARQUEE_KEYFRAMES}</style>
+    </div>
+  )
+}
+
+export default RLSMarquee

package/src/components/meter/RLSMeter.tsx

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

package/src/components/modal/RLAModal.astro

@@ -23,7 +23,7 @@ const classes = modalTheme(Astro.props)
 
 const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
 ---
-<div class={classes.root} data-slot="modal-container">
+<div class={classes.root} data-slot="root">
   {triggerLabel ? (
     <button
       class={classes.trigger}