@rimelight/ui 0.0.37 → 0.0.39

package/src/components/link/helpers.ts

@@ -0,0 +1,47 @@
+import type { LinkProps } from "./link"
+
+const EXTERNAL_URL_RE = /^(?:https?:)?\/\//
+
+export function resolveLinkAttrs(props: Partial<LinkProps>) {
+  const isExternal = !!(props.external || (props.href && EXTERNAL_URL_RE.test(props.href)))
+
+  const showTrailingIcon =
+    isExternal && !props.noExternalIcon && !props.trailingIcon
+      ? props.externalIcon || "externalLink"
+      : props.trailingIcon
+
+  const target = props.target || (isExternal ? "_blank" : undefined)
+
+  const rel =
+    props.rel === "" || props.rel === null
+      ? undefined
+      : (props.rel ??
+        (isExternal || (target && target !== "_self") ? "noopener noreferrer" : undefined))
+
+  const rawAriaCurrent = props.active ? (props.ariaCurrentValue ?? "page") : undefined
+  const ariaCurrent =
+    rawAriaCurrent === true ? "true" : rawAriaCurrent === false ? "false" : rawAriaCurrent
+
+  const prefetchAttr =
+    props.prefetch !== undefined
+      ? props.prefetch === true
+        ? "viewport"
+        : props.prefetch === false
+          ? "false"
+          : props.prefetch
+      : undefined
+
+  const href = props.disabled ? undefined : props.href
+  const ariaDisabled: "true" | undefined = props.disabled ? "true" : undefined
+
+  return {
+    isExternal,
+    showTrailingIcon,
+    target,
+    rel,
+    ariaCurrent,
+    prefetchAttr,
+    href,
+    ariaDisabled
+  }
+}

package/src/components/link/link.theme.ts

@@ -0,0 +1,40 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createLinkTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "leadingIcon", "trailingIcon"],
+    base: {
+      root: "outline-primary/25 focus-visible:outline-3 rounded-md inline-flex items-center gap-1 leading-none transition-colors",
+      label: "",
+      leadingIcon: "-translate-y-[1.5px]",
+      trailingIcon: "-translate-y-[1.5px]"
+    },
+    variants: {
+      active: {
+        true: { root: "text-primary" },
+        false: { root: "text-muted" }
+      },
+      disabled: {
+        true: { root: "cursor-not-allowed opacity-75" },
+        false: {}
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      {
+        active: false,
+        disabled: false,
+        classNames: { root: ["hover:text-default"] }
+      },
+      {
+        active: true,
+        disabled: false,
+        classNames: { root: ["hover:text-primary"] }
+      }
+    ]
+  })
+
+export default createLinkTheme()

package/src/components/link/link.ts

@@ -0,0 +1,99 @@
+import type { Theme } from "../../types/component"
+
+export interface LinkProps {
+  /**
+   * The text label displayed inside the link. Alternative to passing children via the default slot.
+   */
+  label?: string
+  /**
+   * Icon name displayed before the link label.
+   */
+  leadingIcon?: string
+  /**
+   * Icon name displayed after the link label. Replaces the external icon when set.
+   */
+  trailingIcon?: string
+  /**
+   * The URL the link points to.
+   */
+  href?: string
+  /**
+   * Forces the link to be treated as an external link.
+   *
+   * @default false
+   */
+  external?: boolean
+  /**
+   * Custom external link icon name.
+   *
+   * @default "externalLink"
+   */
+  externalIcon?: string
+  /**
+   * Suppress the automatic external link icon.
+   *
+   * @default false
+   */
+  noExternalIcon?: boolean
+  /**
+   * Where to open the linked URL. External links default to `"_blank"`.
+   *
+   * @default undefined
+   */
+  target?: string
+  /**
+   * Relationship of the linked URL. External links default to `"noopener noreferrer"`. Set to empty
+   * string to suppress the attribute entirely.
+   *
+   * @default undefined
+   */
+  rel?: string | null
+  /**
+   * Enables Astro's built-in prefetch strategy.
+   *
+   * @default undefined;
+   */
+  prefetch?: boolean | "hover" | "tap" | "load" | "viewport"
+  /**
+   * Applies active styling to the link.
+   *
+   * @default undefined
+   */
+  active?: boolean
+  /**
+   * Disables the link, preventing navigation and applying disabled styling.
+   *
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * When true, only `class` is applied — all default theme styles are skipped.
+   *
+   * @default false
+   */
+  raw?: boolean
+  /**
+   * Screen reader accessibility label. When omitted on external links, "(opens in a new tab)" is
+   * appended automatically.
+   */
+  ariaLabel?: string
+  /**
+   * The value of `aria-current` when the link is the active/current page.
+   *
+   * @default "page"
+   */
+  ariaCurrentValue?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean
+  /**
+   * Force a color-scheme context on the component.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/link-group/RLALinkGroup.astro

@@ -0,0 +1,96 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { LinkGroupProps } from "./link-group"
+import linkGroupTheme from "./link-group.theme"
+
+import RLALink from "../link/RLALink.astro"
+
+
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const linkGroup = scv(linkGroupTheme)
+
+const {
+  title,
+  label,
+  leadingIcon,
+  trailingIcon,
+  href,
+  links = [],
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LinkGroupProps
+
+const classes = resolveClasses(linkGroup, { theme }, useUi("linkGroup", uiProp), className);
+
+const headingLabel = label || (typeof title === "object" ? title.label : (typeof title === "string" ? title : undefined));
+const headingLeadingIcon = leadingIcon || (typeof title === "object" ? title.leadingIcon : undefined);
+const headingTrailingIcon = trailingIcon || (typeof title === "object" ? title.trailingIcon : undefined);
+const headingHref = href || (typeof title === "object" ? title.href : undefined);
+
+if (label && typeof title === "string") {
+  rest.title = title;
+}
+
+const normalizedLinks = Array.isArray(links) ? links : [links];
+
+const isPinnedDark = theme === "dark";
+const overrideLinkClass = classes.link
+    ? classes.link
+        .split(" ")
+        .map(cls => {
+            if (!cls) return "";
+            if (cls.includes(":")) {
+                const parts = cls.split(":");
+                const state = parts.slice(0, -1).join(":");
+                const baseCls = parts[parts.length - 1];
+                return `${state}:!${baseCls}`;
+            }
+            if (cls.startsWith("text-") && !isPinnedDark) {
+                return cls;
+            }
+            return `!${cls}`;
+        })
+        .filter(Boolean)
+        .join(" ")
+    : "";
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  {headingLabel && (
+    <h4 class={classes.title} data-slot="title">
+      {headingHref ? (
+        <a href={headingHref} class="hover:underline flex items-center gap-1.5">
+          {headingLeadingIcon && <RLAIcon name={headingLeadingIcon} size="sm" />}
+          <span>{headingLabel}</span>
+          {headingTrailingIcon && <RLAIcon name={headingTrailingIcon} size="sm" />}
+        </a>
+      ) : (
+        <span class="flex items-center gap-1.5">
+          {headingLeadingIcon && <RLAIcon name={headingLeadingIcon} size="sm" />}
+          <span>{headingLabel}</span>
+          {headingTrailingIcon && <RLAIcon name={headingTrailingIcon} size="sm" />}
+        </span>
+      )}
+    </h4>
+  )}
+  
+  <ul class={classes.list} data-slot="list">
+    <slot>
+      {normalizedLinks.map((link) => (
+        <li class={classes.item} data-slot="item">
+          <RLALink
+            theme={link.theme ?? theme}
+            class:list={[overrideLinkClass, "w-full !justify-start"]}
+            data-slot="link"
+            {...link}
+          />
+        </li>
+      ))}
+    </slot>
+  </ul>
+</div>

package/src/components/link-group/link-group.theme.ts

@@ -0,0 +1,28 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createLinkGroupTheme = () =>
+  defineTheme({
+    slots: ["root", "title", "list", "item", "link"],
+    base: {
+      root: "flex flex-col gap-4",
+      title: "font-bold text-sm uppercase tracking-wider text-neutral-500",
+      list: "flex flex-col gap-2",
+      item: "",
+      link: "text-sm text-muted-foreground hover:text-accent-foreground transition-colors"
+    },
+    variants: {
+      theme: {
+        dark: {
+          link: "text-white hover:text-accent-foreground",
+          title: "text-white"
+        },
+        light: {
+          link: "text-foreground hover:text-accent-foreground",
+          title: "text-foreground"
+        }
+      }
+    },
+    defaultVariants: {}
+  })
+
+export default createLinkGroupTheme()

package/src/components/link-group/link-group.ts

@@ -0,0 +1,50 @@
+import type { LinkProps } from "../link/link"
+
+export interface LinkGroupProps {
+  /**
+   * The direct text label of the group heading.
+   */
+  label?: string
+  /**
+   * @deprecated Use `label` instead to avoid conflicts with native HTML tooltip attribute.
+   */
+  title?:
+    | string
+    | {
+        label: string
+        leadingIcon?: string
+        trailingIcon?: string
+        href?: string
+      }
+  /**
+   * Leading icon of the group heading.
+   */
+  leadingIcon?: string
+  /**
+   * Trailing icon of the group heading.
+   */
+  trailingIcon?: string
+  /**
+   * Hyperlink target URL for the group heading.
+   */
+  href?: string
+  /**
+   * The links in the group. Supports full button/link properties.
+   */
+  links?: LinkProps | LinkProps[]
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Force a color-scheme context on the link group. `"light"` or `"dark"` sets `color-scheme` on
+   * the root element, causing all `light-dark()` color variables to resolve to the correct scheme
+   * regardless of the global page mode.
+   */
+  theme?: "light" | "dark"
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/listbox/RLAListbox.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ListboxProps } from "./listbox"
+import listboxTheme from "./listbox.theme"
+
+
+const listbox = scv(listboxTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ListboxProps
+
+const classes = resolveClasses(listbox, {}, useUi("listbox", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/listbox/listbox.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createListboxTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createListboxTheme()

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

@@ -0,0 +1,142 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+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 localeSelector = scv(localeSelectorTheme)
+
+const {
+    locales,
+    currentLocale: currentLocaleProp,
+    variant = "default",
+    size = "md",
+    ui: uiProp,
+    class: className,
+    ...rest
+} = Astro.props as LocaleSelectorProps;
+
+const classes = resolveClasses(localeSelector, {
+    variant,
+    size
+}, useUi("localeSelector", uiProp), className);
+
+// 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 || "";
+
+// Prefix utility classes in classes.select with `!` to cleanly override conflicting styles in RLASelect's base trigger
+// Also remove `pr-` classes which were meant for absolute positioned native select icons
+const overrideTriggerClass = classes.select
+    ? classes.select
+        .split(" ")
+        .map(cls => {
+            if (!cls) return "";
+            if (cls.startsWith("pr-") || cls.startsWith("!pr-")) return ""; // Strip padding-right
+            if (cls.includes(":")) {
+                const parts = cls.split(":");
+                const state = parts.slice(0, -1).join(":");
+                const baseCls = parts[parts.length - 1];
+                return `${state}:!${baseCls}`;
+            }
+            return `!${cls}`;
+        })
+        .filter(Boolean)
+        .join(" ")
+    : "";
+
+const gapClass = size === "sm" ? "gap-1.5" : size === "lg" ? "gap-3" : "gap-2";
+
+const selectUi = {
+    root: "!w-fit !inline-flex",
+    trigger: `flex items-center justify-between !w-fit ${gapClass} ${overrideTriggerClass}`,
+    content: "!min-w-0 !w-full !bg-[var(--popover)] !border-[var(--border)] !text-[var(--popover-foreground)]",
+    item: "!text-[var(--foreground)] hover:!bg-[var(--accent)] hover:!text-[var(--accent-foreground)]"
+};
+---
+
+<rla-locale-selector {...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}
+                ui={selectUi}
+            />
+        </div>
+    </div>
+</rla-locale-selector>
+
+<script>
+    class RLALocaleSelector extends HTMLElement {
+        connectedCallback() {
+            this.style.display = 'contents';
+            this.addEventListener('change', (event) => {
+                const target = event.target as HTMLInputElement;
+                if (target && target.hasAttribute('data-select-hidden-input')) {
+                    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/locale-selector.theme.ts

@@ -0,0 +1,49 @@
+import { defineTheme } from "../../utils/defineTheme"
+export const createLocaleSelectorTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "wrapper", "select", "option", "iconWrapper"],
+    base: {
+      root: "inline-flex flex-col gap-1.5",
+      label: "text-xs font-semibold text-muted select-none",
+      wrapper: "relative inline-block",
+      select:
+        "w-full appearance-none font-medium rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-emerald-500/40 cursor-pointer pr-10",
+      option: "bg-neutral-900 text-white selection:bg-neutral-800",
+      iconWrapper:
+        "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-current group-hover:text-default"
+    },
+    variants: {
+      variant: {
+        default: {
+          select: "bg-gray-100 text-gray-800 hover:bg-gray-200 border border-transparent"
+        },
+        outline: {
+          select:
+            "bg-transparent border border-neutral-800 text-white hover:bg-neutral-900 hover:border-neutral-700"
+        },
+        ghost: {
+          select: "bg-transparent border border-transparent text-white hover:bg-neutral-900"
+        }
+      },
+      size: {
+        sm: {
+          label: "text-xxs",
+          select: "text-xs px-3 py-1.5 pr-8"
+        },
+        md: {
+          label: "text-xs",
+          select: "text-sm px-4 py-2 pr-9"
+        },
+        lg: {
+          label: "text-sm",
+          select: "text-base px-5 py-2.5 pr-10"
+        }
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  })
+
+export default createLocaleSelectorTheme()

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

@@ -0,0 +1,59 @@
+export interface LocaleItem {
+  code: string
+  label: string
+  /**
+   * 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).
+   */
+  href?: string
+}
+
+export interface LocaleSelectorProps {
+  /**
+   * Array of available locales to display in the selector.
+   *
+   * Accepts plain locale code strings (`"en"`, `"pt"`) or full `LocaleItem` objects. Supply an
+   * `href` on each `LocaleItem` to make the component fully routing-agnostic — when every item has
+   * an `href` the component no longer depends on Astro's i18n APIs at all.
+   *
+   * When omitted the component auto-detects available locales from `getRelativeLocaleUrlList()`
+   * (requires Astro i18n).
+   */
+  locales?: string[] | LocaleItem[]
+  /**
+   * The currently active locale code. Used to pre-select the right option in the dropdown.
+   *
+   * When omitted the component falls back to `Astro.currentLocale`, which requires Astro's i18n
+   * middleware to be running. Pass this prop explicitly when your project manages locale state
+   * outside of Astro's built-in routing.
+   */
+  currentLocale?: string
+  /**
+   * The styling variant of the language selection element.
+   *
+   * @default "default"
+   */
+  variant?: "default" | "outline" | "ghost"
+  /**
+   * The size scale of typography and spacing metrics.
+   *
+   * @default "md"
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}