@rimelight/ui 0.0.30 → 0.0.31

package/src/components/{Head.astro → astro/RLAHead.astro}

@@ -1,199 +1,181 @@
----
-import { ClientRouter } from 'astro:transitions';
-import type { SiteConfig } from '@/config';
-import { App } from '../nuxt.ts';
-
-export interface OGImage {
-  /** Image URL (relative or absolute) */
-  src: string;
-  /** Alt text for the image */
-  alt: string;
-}
-
-export interface RSSFeed {
-  /** RSS feed URL */
-  href: string;
-  /** Feed title (defaults to "RSS") */
-  title?: string;
-}
-
-export interface HeadProps {
-  /** Page title */
-  title?: string;
-  /** Page description */
-  description?: string;
-  /** Open Graph image with alt text */
-  ogImage?: OGImage;
-  /** Open Graph type (e.g., "website", "article") */
-  ogType?: string;
-  /** Open Graph locale (defaults to "en_US") */
-  ogLocale?: string;
-  /** Whether to prevent indexing */
-  noindex?: boolean;
-  /** Whether this is a 404 page */
-  is404?: boolean;
-  /** Robots metadata (overrides noindex/is404 logic if provided) */
-  robots?: string;
-  /** Canonical URL */
-  canonical?: string;
-  /** Language alternates for i18n */
-  languageAlternates?: Array<{ hreflang: string; href: string }>;
-  /** Site configuration for defaults */
-  config?: SiteConfig;
-  /** Whether to enable View Transitions (ClientRouter) */
-  transitions?: boolean;
-  /** Meta charset */
-  charset?: string;
-  /** Meta viewport */
-  viewport?: string;
-  /** RSS feed configuration */
-  rssFeed?: RSSFeed;
-}
-
-const {
-  title,
-  description,
-  ogImage,
-  ogType = 'website',
-  ogLocale = 'en_US',
-  noindex = false,
-  is404 = false,
-  robots,
-  canonical,
-  languageAlternates = [],
-  config,
-  transitions = true,
-  charset = 'utf-8',
-  viewport = 'width=device-width,initial-scale=1',
-  rssFeed,
-} = Astro.props as HeadProps;
-
-// Resolve defaults from config if available
-const siteName = config?.name || 'Rimelight';
-const siteDescription = config?.description || '';
-const ogImageFallback = config?.seo?.ogImageFallback || config?.ogImage || '';
-const themeColor = config?.branding?.colors?.themeColor;
-const favicon = config?.branding?.favicon?.svg || '/favicon.svg';
-const twitterHandle = config?.seo?.authorHandle;
-const titleTemplate = config?.seo?.titleTemplate || `%s | ${siteName}`;
-
-// Calculated Values
-const displayTitle = is404
-  ? `404 - Not Found | ${siteName}`
-  : title
-    ? titleTemplate.replace('%s', title)
-    : siteName;
-
-const finalDescription = description || siteDescription;
-const safeDescription = finalDescription && config?.seo?.maxDescriptionLength
-  ? (finalDescription.length > config.seo.maxDescriptionLength
-      ? finalDescription.slice(0, config.seo.maxDescriptionLength - 3) + '...'
-      : finalDescription)
-  : finalDescription;
-
-const finalOgImage = ogImage || (ogImageFallback ? { src: ogImageFallback, alt: siteName } : undefined);
-const absoluteOgImage = finalOgImage
-  ? new URL(finalOgImage.src, Astro.site).toString()
-  : undefined;
-
-function formatCanonicalURL(url: string | URL) {
-  const resolved = new URL(url, Astro.site);
-  const path = resolved.toString();
-  const hasQueryParams = path.includes('?');
-  if (hasQueryParams) {
-    return path.replace(/\/?$/, '');
-  }
-  return path.replace(/\/?$/, '/');
-}
-
-const finalCanonical = canonical
-  ? formatCanonicalURL(canonical)
-  : (!is404 ? formatCanonicalURL(Astro.url) : undefined);
-
-const isIndexable = !noindex && !is404;
-const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : 'noindex, nofollow';
----
-
-<!-- Basic Metadata -->
-<meta charset={charset} />
-<meta name="viewport" content={viewport} />
-<meta name="generator" content={Astro.generator} />
-
-<!-- Sitemap -->
-<link rel="sitemap" href="/sitemap-index.xml" />
-
-<!-- RSS Feed -->
-{rssFeed && <link rel="alternate" type="application/rss+xml" href={rssFeed.href} title={rssFeed.title || 'RSS'} />}
-
-<!-- SEO -->
-<title>{displayTitle}</title>
-{safeDescription && <meta name="description" content={safeDescription} />}
-<meta name="robots" content={robots || defaultRobots} />
-{finalCanonical && <link rel="canonical" href={finalCanonical} />}
-
-<!-- i18n Alternates -->
-{languageAlternates.map((alt) => (
-  <link rel="alternate" hreflang={alt.hreflang} href={alt.href} />
-))}
-
-<!-- Open Graph / Facebook -->
-<meta property="og:type" content={ogType} />
-<meta property="og:locale" content={ogLocale} />
-<meta property="og:url" content={Astro.url.href} />
-<meta property="og:title" content={title || siteName} />
-{safeDescription && <meta property="og:description" content={safeDescription} />}
-{absoluteOgImage && <meta property="og:image" content={absoluteOgImage} />}
-{finalOgImage && <meta property="og:image:alt" content={finalOgImage.alt} />}
-<meta property="og:site_name" content={siteName} />
-
-<!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={Astro.url.href} />
-<meta property="twitter:title" content={title || siteName} />
-{safeDescription && <meta property="twitter:description" content={safeDescription} />}
-{absoluteOgImage && <meta property="twitter:image" content={absoluteOgImage} />}
-{finalOgImage && <meta property="twitter:image:alt" content={finalOgImage.alt} />}
-{twitterHandle && <meta property="twitter:site" content={twitterHandle} />}
-{twitterHandle && <meta property="twitter:creator" content={twitterHandle} />}
-
-<!-- Icons -->
-<link rel="icon" type="image/svg+xml" href={favicon} />
-
-<!-- Theme -->
-{themeColor && <meta name="theme-color" content={themeColor} />}
-
-<script is:inline>
-  const theme = (() => {
-    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-      return localStorage.getItem('theme');
-    }
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-    return 'light';
-  })();
-
-  if (theme === 'dark') {
-    document.documentElement.classList.add('dark');
-  } else {
-    document.documentElement.classList.remove('dark');
-  }
-
-  window.localStorage.setItem('theme', theme);
-</script>
-
-<script>
-  document.addEventListener('astro:after-swap', () => {
-    if (localStorage.getItem('theme') === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  });
-</script>
-
-{transitions && <ClientRouter />}
-
-<App client:load>
-  <slot />
-</App>
+---
+import { ClientRouter } from 'astro:transitions';
+import type { SiteConfig } from '@/config';
+
+export interface OGImage {
+  /** Image URL (relative or absolute) */
+  src: string;
+  /** Alt text for the image */
+  alt: string;
+}
+
+export interface RSSFeed {
+  /** RSS feed URL */
+  href: string;
+  /** Feed title (defaults to "RSS") */
+  title?: string;
+}
+
+export interface HeadProps {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Open Graph image with alt text */
+  ogImage?: OGImage;
+  /** Open Graph type (e.g., "website", "article") */
+  ogType?: string;
+  /** Open Graph locale (defaults to "en_US") */
+  ogLocale?: string;
+  /** Whether to prevent indexing */
+  noindex?: boolean;
+  /** Whether this is a 404 page */
+  is404?: boolean;
+  /** Robots metadata (overrides noindex/is404 logic if provided) */
+  robots?: string;
+  /** Canonical URL */
+  canonical?: string;
+  /** Language alternates for i18n */
+  languageAlternates?: Array<{ hreflang: string; href: string }>;
+  /** Site configuration for defaults */
+  config?: SiteConfig;
+  /** Whether to enable View Transitions (ClientRouter) */
+  transitions?: boolean;
+  /** Meta charset */
+  charset?: string;
+  /** Meta viewport */
+  viewport?: string;
+  /** RSS feed configuration */
+  rssFeed?: RSSFeed;
+}
+
+const {
+  title,
+  description,
+  ogImage,
+  ogType = 'website',
+  ogLocale = 'en_US',
+  noindex = false,
+  is404 = false,
+  robots,
+  canonical,
+  languageAlternates = [],
+  config,
+  transitions = true,
+  charset = 'utf-8',
+  viewport = 'width=device-width,initial-scale=1',
+  rssFeed,
+} = Astro.props as HeadProps;
+
+// Resolve defaults from config if available
+const siteName = config?.name || 'Rimelight';
+const siteDescription = config?.description || '';
+const ogImageFallback = config?.seo?.ogImageFallback || config?.ogImage || '';
+const themeColor = config?.branding?.colors?.themeColor;
+const favicon = config?.branding?.favicon?.svg || '/favicon.svg';
+const twitterHandle = config?.seo?.authorHandle;
+const titleTemplate = config?.seo?.titleTemplate || `%s | ${siteName}`;
+
+// Calculated Values
+const displayTitle = is404
+  ? `404 - Not Found | ${siteName}`
+  : title
+    ? titleTemplate.replace('%s', title)
+    : siteName;
+
+const finalDescription = description || siteDescription;
+const safeDescription = finalDescription && config?.seo?.maxDescriptionLength
+  ? (finalDescription.length > config.seo.maxDescriptionLength
+      ? finalDescription.slice(0, config.seo.maxDescriptionLength - 3) + '...'
+      : finalDescription)
+  : finalDescription;
+
+const finalOgImage = ogImage || (ogImageFallback ? { src: ogImageFallback, alt: siteName } : undefined);
+const absoluteOgImage = finalOgImage
+  ? new URL(finalOgImage.src, Astro.site).toString()
+  : undefined;
+
+function formatCanonicalURL(url: string | URL) {
+  const resolved = new URL(url, Astro.site);
+  const path = resolved.toString();
+  const hasQueryParams = path.includes('?');
+  if (hasQueryParams) {
+    return path.replace(/\/?$/, '');
+  }
+  return path.replace(/\/?$/, '/');
+}
+
+const finalCanonical = canonical
+  ? formatCanonicalURL(canonical)
+  : (!is404 ? formatCanonicalURL(Astro.url) : undefined);
+
+const isIndexable = !noindex && !is404;
+const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : 'noindex, nofollow';
+---
+
+<!-- Basic Metadata -->
+<meta charset={charset} />
+<meta name="viewport" content={viewport} />
+<meta name="generator" content={Astro.generator} />
+
+<!-- Sitemap -->
+<link rel="sitemap" href="/sitemap-index.xml" />
+
+<!-- RSS Feed -->
+{rssFeed && <link rel="alternate" type="application/rss+xml" href={rssFeed.href} title={rssFeed.title || 'RSS'} />}
+
+<!-- SEO -->
+<title>{displayTitle}</title>
+{safeDescription && <meta name="description" content={safeDescription} />}
+<meta name="robots" content={robots || defaultRobots} />
+{finalCanonical && <link rel="canonical" href={finalCanonical} />}
+
+<!-- i18n Alternates -->
+{languageAlternates.map((alt) => (
+  <link rel="alternate" hreflang={alt.hreflang} href={alt.href} />
+))}
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content={ogType} />
+<meta property="og:locale" content={ogLocale} />
+<meta property="og:url" content={Astro.url.href} />
+<meta property="og:title" content={title || siteName} />
+{safeDescription && <meta property="og:description" content={safeDescription} />}
+{absoluteOgImage && <meta property="og:image" content={absoluteOgImage} />}
+{finalOgImage && <meta property="og:image:alt" content={finalOgImage.alt} />}
+<meta property="og:site_name" content={siteName} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={Astro.url.href} />
+<meta property="twitter:title" content={title || siteName} />
+{safeDescription && <meta property="twitter:description" content={safeDescription} />}
+{absoluteOgImage && <meta property="twitter:image" content={absoluteOgImage} />}
+{finalOgImage && <meta property="twitter:image:alt" content={finalOgImage.alt} />}
+{twitterHandle && <meta property="twitter:site" content={twitterHandle} />}
+{twitterHandle && <meta property="twitter:creator" content={twitterHandle} />}
+
+<!-- Icons -->
+<link rel="icon" type="image/svg+xml" href={favicon} />
+
+<!-- Theme -->
+{themeColor && <meta name="theme-color" content={themeColor} />}
+
+<script is:inline>
+  (function() {
+    const stored = localStorage.getItem('theme');
+    if (stored) {
+      if (stored === 'dark') {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    } else {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark');
+      }
+    }
+  })();
+</script>
+
+{transitions && <ClientRouter />}

package/src/components/astro/RLAHoverCard.astro

@@ -0,0 +1,31 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { HoverCardProps } from "../../types"
+import hoverCardTheme from "../../themes/hoverCard.theme"
+
+const hoverCard = scv(hoverCardTheme)
+
+const {
+  triggerLabel,
+  placement = "bottom",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as HoverCardProps
+
+const classes = resolveClasses(hoverCard, {
+  placement
+}, useUi("hoverCard", uiProp), className)
+---
+<div class={classes.root} data-slot="hover-card-container" {...rest}>
+  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+    <slot name="trigger">
+      {triggerLabel && <span class="cursor-help underline decoration-dotted">{triggerLabel}</span>}
+    </slot>
+  </div>
+
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAInput.astro

@@ -0,0 +1,60 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputProps } from "../../types"
+import inputThemeDefault, { createInputTheme } from "../../themes/input.theme"
+
+const inputTheme = inputThemeDefault
+const input = scv(inputTheme)
+
+const {
+  type = "text",
+  value = "",
+  placeholder,
+  disabled = false,
+  readonly = false,
+  name,
+  required = false,
+  error = false,
+  leadingIcon,
+  trailingIcon,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputProps
+
+const hasLeading = !!leadingIcon
+const hasTrailing = !!trailingIcon
+
+const classes = resolveClasses(input, {
+  size,
+  hasLeading,
+  hasTrailing,
+  error: !!error
+}, useUi("input", uiProp), className);
+---
+<div class={classes.root} data-slot="root">
+  {leadingIcon && (
+    <span class={classes.leading} data-slot="leading-icon">
+      <span class={leadingIcon} />
+    </span>
+  )}
+  <input
+    type={type}
+    class={classes.input}
+    value={value}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    name={name}
+    required={required}
+    {...rest}
+  />
+  {trailingIcon && (
+    <span class={classes.trailing} data-slot="trailing-icon">
+      <span class={trailingIcon} />
+    </span>
+  )}
+</div>

package/src/components/astro/RLAInputGroup.astro

@@ -0,0 +1,35 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputGroupProps } from "../../types"
+import inputGroupThemeDefault, { createInputGroupTheme } from "../../themes/inputGroup.theme"
+
+const inputGroupTheme = inputGroupThemeDefault
+const inputGroup = scv(inputGroupTheme)
+
+const {
+  prepend,
+  append,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputGroupProps
+
+const classes = resolveClasses(inputGroup, {
+  size
+}, useUi("inputGroup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  {prepend && (
+    <div class={classes.prepend} data-slot="prepend">
+      {prepend}
+    </div>
+  )}
+  <slot />
+  {append && (
+    <div class={classes.append} data-slot="append">
+      {append}
+    </div>
+  )}
+</div>

package/src/components/astro/RLAKbd.astro

@@ -0,0 +1,22 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { KbdProps } from "../../types"
+import kbdTheme from "../../themes/kbd.theme"
+
+const kbd = scv(kbdTheme)
+
+const {
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as KbdProps
+
+const classes = resolveClasses(kbd, {
+  size
+}, useUi("kbd", uiProp), className)
+---
+<kbd class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</kbd>

package/src/components/astro/RLALabel.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LabelProps } from "../../types"
+import labelTheme from "../../themes/label.theme"
+
+const label = scv(labelTheme)
+
+const {
+  for: htmlFor,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LabelProps
+
+const classes = resolveClasses(label, {
+  size
+}, useUi("label", uiProp), className)
+---
+<label class={classes.root} data-slot="root" for={htmlFor} {...rest}>
+  <slot />
+</label>