@rimelight/ui 0.0.46 → 0.0.48

package/src/components/logo/RLALogo.astro

@@ -1,102 +1,153 @@
----
-import type { LogoProps } from "./logo"
-import { logoTheme } from "./logo.theme"
-import uiConfig from "virtual:rimelight/ui"
-
-const {
-  variant = "logomark",
-  mode,
-  href = "/",
-  alt,
-  ...rest
-} = Astro.props as LogoProps;
-
-let resolvedHref = href;
-if (href === "/") {
-  try {
-    const { getRelativeLocaleUrl } = await import("astro:i18n");
-    resolvedHref = Astro.currentLocale
-      ? getRelativeLocaleUrl(Astro.currentLocale, "/")
-      : getRelativeLocaleUrl("/");
-  } catch {
-    if (Astro.currentLocale) {
-      resolvedHref = `/${Astro.currentLocale}/`;
-    }
-  }
-}
-
-const classes = logoTheme(Astro.props);
-
-let logoSrc: string | null = null;
-let darkSrc: string | null = null;
-let lightSrc: string | null = null;
-
-const logoFiles = import.meta.glob<{ default: any }>("/src/assets/**/*.{svg,png,jpg,jpeg,webp,gif}", { eager: true });
-
-function resolveLogo(pathStr: string | null | undefined): any {
-  if (!pathStr) return null;
-  let lookupPath = pathStr;
-  if (lookupPath.startsWith("./")) {
-    lookupPath = lookupPath.substring(1);
-  } else if (!lookupPath.startsWith("/")) {
-    lookupPath = "/" + lookupPath;
-  }
-  const file = logoFiles[lookupPath];
-  if (file) {
-    return file.default?.src || file.default;
-  }
-  return pathStr;
-}
-
-const logoVariant = uiConfig.logos?.[variant];
-if (logoVariant && typeof logoVariant === "object") {
-  if (mode) {
-    logoSrc = resolveLogo(logoVariant[mode] || logoVariant.color);
-  } else {
-    logoSrc = resolveLogo(logoVariant.color || logoVariant.black || logoVariant.white);
-    darkSrc = resolveLogo(logoVariant.white || logoVariant.color);
-    lightSrc = resolveLogo(logoVariant.black || logoVariant.color);
-  }
-} else if (typeof logoVariant === "string") {
-  logoSrc = resolveLogo(logoVariant);
-}
-
-const startsWithUrlPrefix = logoSrc && (logoSrc.startsWith("http") || logoSrc.startsWith("/") || logoSrc.startsWith("."));
-const isIcon = logoSrc && !startsWithUrlPrefix && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
-const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode;
----
-
-<a
-  class={classes.root}
-  href={resolvedHref}
-  aria-label={alt || variant}
-  data-slot="root"
-  {...rest}
->
-  {logoSrc ? (
-    isIcon ? (
-      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
-    ) : hasAutoMode ? (
-      <>
-        <img
-          src={lightSrc}
-          alt={alt || ""}
-          class="size-full block object-contain shrink-0 dark:hidden"
-        />
-        <img
-          src={darkSrc}
-          alt={alt || ""}
-          class="size-full hidden object-contain shrink-0 dark:block"
-        />
-      </>
-    ) : (
-      <img
-        src={logoSrc}
-        alt={alt || ""}
-        class="size-full block object-contain shrink-0"
-      />
-    )
-  ) : (
-    <slot />
-  )}
-</a>
+---
+import type { LogoProps } from "./logo"
+import { logoTheme } from "./logo.theme"
+import uiConfig from "virtual:rimelight/ui"
+
+const {
+  variant = "logomark",
+  mode,
+  theme,
+  href = "/",
+  alt,
+  ...rest
+} = Astro.props as LogoProps;
+
+const classes = logoTheme(Astro.props);
+
+let logoSrc: string | null = null;
+let darkSrc: string | null = null;
+let lightSrc: string | null = null;
+
+const logoFiles = import.meta.glob<{ default: any }>("/src/assets/**/*.{svg,png,jpg,jpeg,webp,gif}", { eager: true });
+
+function resolveLogo(pathStr: string | null | undefined): any {
+  if (!pathStr) return null;
+  let lookupPath = pathStr;
+  if (lookupPath.startsWith("./")) {
+    lookupPath = lookupPath.substring(1);
+  } else if (!lookupPath.startsWith("/")) {
+    lookupPath = "/" + lookupPath;
+  }
+  const file = logoFiles[lookupPath];
+  if (file) {
+    return file.default?.src || file.default;
+  }
+  return pathStr;
+}
+
+const logoVariant = uiConfig.logos?.[variant];
+if (logoVariant && typeof logoVariant === "object") {
+  if (mode) {
+    logoSrc = resolveLogo(logoVariant[mode] || logoVariant.color);
+  } else {
+    logoSrc = resolveLogo(logoVariant.color || logoVariant.black || logoVariant.white);
+    darkSrc = resolveLogo(logoVariant.white || logoVariant.color);
+    lightSrc = resolveLogo(logoVariant.black || logoVariant.color);
+  }
+} else if (typeof logoVariant === "string") {
+  logoSrc = resolveLogo(logoVariant);
+}
+
+const startsWithUrlPrefix = logoSrc && (logoSrc.startsWith("http") || logoSrc.startsWith("/") || logoSrc.startsWith("."));
+const isIcon = logoSrc && !startsWithUrlPrefix && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
+const hasAutoMode = darkSrc && lightSrc && darkSrc !== lightSrc && !mode;
+---
+
+<a
+  class={classes.root}
+  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="rla-logo-light size-full block object-contain shrink-0"
+        />
+        <img
+          src={darkSrc}
+          alt={alt || ""}
+          class="rla-logo-dark size-full hidden object-contain shrink-0"
+        />
+      </span>
+    ) : (
+      <img
+        src={logoSrc}
+        alt={alt || ""}
+        class="size-full block object-contain shrink-0"
+      />
+    )
+  ) : (
+    <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}