@rimelight/ui 0.0.46 → 0.0.48

package/src/components/listbox/RLSListbox.tsx

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

package/src/components/locale-selector/RLALocaleSelector.astro

@@ -1,102 +1,110 @@
----
-import type { LocaleSelectorProps } from "./locale-selector"
-import { localeSelectorTheme } from "./locale-selector.theme"
-import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n"
-import RLASelect from "../select/RLASelect.astro"
-
-const {
-  locales,
-  currentLocale: currentLocaleProp,
-  size = "md",
-  theme,
-  ...rest
-} = Astro.props as LocaleSelectorProps;
-
-const classes = localeSelectorTheme(Astro.props);
-
-// Resolve the active locale: explicit prop → Astro.currentLocale → 'en'
-const currentLocale = currentLocaleProp ?? Astro.currentLocale ?? 'en';
-
-// Normalise locales: accept strings, LocaleItem without href, or LocaleItem with href.
-// When no locales are supplied, fall back to Astro i18n auto-detection.
-const processedLocales = locales && locales.length > 0
-    ? locales.map(item => typeof item === 'string' ? { code: item, label: item, href: undefined } : item)
-    : [...new Map(getRelativeLocaleUrlList().map(url => {
-        const locale = url.split('/')[1] || 'en';
-        return [locale, { code: locale, label: locale, href: undefined }];
-    })).values()];
-
-function 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 (e) {
-        return localeCode.toUpperCase();
-    }
-}
-
-const items = processedLocales.map((item) => {
-    // If the caller supplied an explicit href, use it directly.
-    // Otherwise fall back to Astro's getRelativeLocaleUrl, preserving the
-    // current path and query string.
-    let targetUrl: string;
-    if (item.href !== undefined && item.href !== null) {
-        targetUrl = item.href + Astro.url.search;
-    } else {
-        const basePath = Astro.url.pathname.replace(/^\/[^/]+/, '') || '/';
-        targetUrl = getRelativeLocaleUrl(item.code, basePath) + Astro.url.search;
-    }
-
-    return {
-        label: item.label !== item.code ? item.label : getLocaleDisplayName(item.code),
-        value: targetUrl,
-        code: item.code
-    };
-});
-
-const currentLocaleUrl = items.find(item => item.code === currentLocale)?.value || "";
----
-
-<rla-locale-selector data-theme={theme} {...rest}>
-    <div class:list={[classes.root]} data-locale-selector>
-        {Astro.slots.has("label") && (
-                <label class:list={[classes.label]}>
-                    <slot name="label" />
-                </label>
-        )}
-
-        <div class:list={[classes.wrapper]}>
-            <RLASelect
-                items={items}
-                value={currentLocaleUrl}
-                size={size}
-                theme={theme}
-            />
-        </div>
-    </div>
-</rla-locale-selector>
-
-<script>
-    class RLALocaleSelector extends HTMLElement {
-        connectedCallback() {
-            this.style.display = 'contents';
-            this.addEventListener('change', (event) => {
-                const target = event.target as HTMLSelectElement;
-                if (target && target.tagName === 'SELECT') {
-                    const targetUrl = target.value;
-                    if (targetUrl) {
-                        window.location.href = targetUrl;
-                    }
-                }
-            });
-        }
-    }
-
-    if (!customElements.get('rla-locale-selector')) {
-        customElements.define('rla-locale-selector', RLALocaleSelector);
-    }
-</script>
+---
+import type { LocaleSelectorProps, LocaleItem } from "./locale-selector"
+import { localeSelectorTheme } from "./locale-selector.theme"
+import RLASelect from "../select/RLASelect.astro"
+
+const {
+  locales = [],
+  currentLocale = "en",
+  size = "md",
+  theme,
+  class: classAttr,
+  ...rest
+} = Astro.props as LocaleSelectorProps;
+
+const classes = localeSelectorTheme(Astro.props);
+
+function 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();
+  }
+}
+
+// Normalize locales: string or LocaleItem
+const processedLocales: LocaleItem[] = locales.map(item =>
+  typeof item === 'string'
+    ? { code: item, label: getLocaleDisplayName(item) }
+    : { ...item, label: item.label || getLocaleDisplayName(item.code) }
+);
+
+const items = processedLocales.map((item) => {
+  let targetUrl: string;
+  if (item.href !== undefined && item.href !== null) {
+    targetUrl = item.href + (item.href.includes("?") ? "" : Astro.url.search);
+  } else {
+    // Derive the known locale codes from the props list so we can detect
+    // whether the first URL segment is a locale prefix or a real path segment.
+    const knownCodes = new Set(processedLocales.map((l) => l.code));
+
+    const pathname = Astro.url.pathname;
+    const segments = pathname.split("/").filter(Boolean);
+    const firstIsLocale = segments.length > 0 && knownCodes.has(segments[0]!);
+
+    if (firstIsLocale) {
+      // Replace existing locale prefix with the target locale.
+      segments[0] = item.code;
+      targetUrl = `/${segments.join("/")}${pathname.endsWith("/") ? "/" : ""}${Astro.url.search}`;
+    } else if (segments.length > 0) {
+      // No locale prefix in the current URL — prepend the target locale.
+      targetUrl = `/${item.code}/${segments.join("/")}${pathname.endsWith("/") ? "/" : ""}${Astro.url.search}`;
+    } else {
+      // Root path.
+      targetUrl = `/${item.code}/${Astro.url.search}`;
+    }
+  }
+
+  return {
+    label: item.label,
+    value: targetUrl,
+    code: item.code
+  };
+});
+
+const currentLocaleUrl = items.find(item => item.code === currentLocale)?.value || "";
+---
+
+<rla-locale-selector data-theme={theme} {...rest}>
+    <div class:list={[classes.root, classAttr]} data-locale-selector>
+        {Astro.slots.has("label") && (
+                <label class:list={[classes.label]}>
+                    <slot name="label" />
+                </label>
+        )}
+
+        <div class:list={[classes.wrapper]}>
+            <RLASelect
+                items={items}
+                value={currentLocaleUrl}
+                size={size}
+                theme={theme}
+            />
+        </div>
+    </div>
+</rla-locale-selector>
+
+<script>
+    class RLALocaleSelector extends HTMLElement {
+        connectedCallback() {
+            this.style.display = 'contents';
+            this.addEventListener('change', (event) => {
+                const target = event.target as HTMLSelectElement;
+                if (target && target.tagName === 'SELECT') {
+                    const targetUrl = target.value;
+                    if (targetUrl) {
+                        window.location.href = targetUrl;
+                    }
+                }
+            });
+        }
+    }
+
+    if (!customElements.get('rla-locale-selector')) {
+        customElements.define('rla-locale-selector', RLALocaleSelector);
+    }
+</script>

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/locale-selector/locale-selector.ts

@@ -4,13 +4,8 @@ export interface LocaleItem {
   /**
    * The URL to navigate to when this locale is selected.
    *
-   * Supply this to make the component fully routing-agnostic: it will use `href` directly and will
-   * not call any Astro i18n APIs. The caller is responsible for constructing URLs using whatever
-   * strategy their project uses — `getRelativeLocaleUrl`, `@rimelight/i18n`, a custom helper, or a
-   * plain string.
-   *
-   * When omitted the component falls back to computing the URL via Astro's built-in
-   * `getRelativeLocaleUrl` helper (requires Astro i18n to be configured).
+   * Supply this to make the component fully routing-agnostic: it will use `href` directly. When
+   * omitted, the component falls back to updating the first URL segment to match the locale code.
    */
   href?: string
 }