@rimelight/ui 0.0.42 → 0.0.44

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

@@ -1,9 +1,6 @@
 ---
-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 { linkGroupTheme } from "./link-group.theme"
 
 import RLALink from "../link/RLALink.astro"
 
@@ -11,56 +8,22 @@ import RLALink from "../link/RLALink.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const linkGroup = scv(linkGroupTheme)
 
 const {
-  title,
-  label,
-  leadingIcon,
-  trailingIcon,
-  href,
+  label: headingLabel,
+  leadingIcon: headingLeadingIcon,
+  trailingIcon: headingTrailingIcon,
+  href: headingHref,
   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 classes = linkGroupTheme(Astro.props);
 
 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}>
+<div class={classes.root} data-slot="root" data-theme={theme} {...rest}>
   {headingLabel && (
     <h4 class={classes.title} data-slot="title">
       {headingHref ? (
@@ -85,7 +48,7 @@ const overrideLinkClass = classes.link
         <li class={classes.item} data-slot="item">
           <RLALink
             theme={link.theme ?? theme}
-            class:list={[overrideLinkClass, "w-full !justify-start"]}
+            class:list={[classes.link, "w-full !justify-start"]}
             data-slot="link"
             {...link}
           />

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

@@ -1,28 +1,14 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-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()
+export const linkGroupTheme = defineTheme("link-group", {
+  slots: ["root", "title", "list", "item", "link"],
+  base: {
+    root: "flex flex-col gap-4",
+    title: "font-bold text-sm uppercase tracking-wider text-dimmed",
+    list: "flex flex-col gap-2",
+    item: "",
+    link: "text-sm text-muted hover:text-highlighted transition-colors"
+  },
+  variants: {},
+  defaultVariants: {}
+})

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

@@ -4,34 +4,23 @@ 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
-      }
+  label?: string | undefined
   /**
    * Leading icon of the group heading.
    */
-  leadingIcon?: string
+  leadingIcon?: string | undefined
   /**
    * Trailing icon of the group heading.
    */
-  trailingIcon?: string
+  trailingIcon?: string | undefined
   /**
    * Hyperlink target URL for the group heading.
    */
-  href?: string
+  href?: string | undefined
   /**
    * The links in the group. Supports full button/link properties.
    */
-  links?: LinkProps | LinkProps[]
+  links?: LinkProps | LinkProps[] | undefined
   /**
    * Slot-specific CSS class overrides.
    */

package/src/components/listbox/RLAListbox.astro

@@ -1,21 +1,10 @@
----
-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 />
+---
+import { listboxTheme } from "./listbox.theme"
+
+
+
+const classes = listboxTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

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

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

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

@@ -1,29 +1,18 @@
 ---
-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 { 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
+  locales,
+  currentLocale: currentLocaleProp,
+  size = "md",
+  theme,
+  ...rest
 } = Astro.props as LocaleSelectorProps;
 
-const classes = resolveClasses(localeSelector, {
-    variant,
-    size
-}, useUi("localeSelector", uiProp), className);
+const classes = localeSelectorTheme(Astro.props);
 
 // Resolve the active locale: explicit prop → Astro.currentLocale → 'en'
 const currentLocale = currentLocaleProp ?? Astro.currentLocale ?? 'en';
@@ -70,38 +59,9 @@ const items = processedLocales.map((item) => {
 });
 
 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}>
+<rla-locale-selector data-theme={theme} {...rest}>
     <div class:list={[classes.root]} data-locale-selector>
         {Astro.slots.has("label") && (
                 <label class:list={[classes.label]}>
@@ -114,7 +74,7 @@ const selectUi = {
                 items={items}
                 value={currentLocaleUrl}
                 size={size}
-                ui={selectUi}
+                theme={theme}
             />
         </div>
     </div>
@@ -125,8 +85,8 @@ const selectUi = {
         connectedCallback() {
             this.style.display = 'contents';
             this.addEventListener('change', (event) => {
-                const target = event.target as HTMLInputElement;
-                if (target && target.hasAttribute('data-select-hidden-input')) {
+                const target = event.target as HTMLSelectElement;
+                if (target && target.tagName === 'SELECT') {
                     const targetUrl = target.value;
                     if (targetUrl) {
                         window.location.href = targetUrl;
@@ -139,4 +99,4 @@ const selectUi = {
     if (!customElements.get('rla-locale-selector')) {
         customElements.define('rla-locale-selector', RLALocaleSelector);
     }
-</script>
+</script>

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

@@ -1,49 +1,46 @@
-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"
-        }
+import { defineTheme } from "../../resolver"
+
+export const localeSelectorTheme = defineTheme("locale-selector", {
+  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-default text-default",
+    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-default text-default hover:bg-accented/50 border border-default"
       },
-      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"
-        }
+      outline: {
+        select: "bg-transparent border border-default text-default hover:bg-accented/50"
+      },
+      ghost: {
+        select: "bg-transparent border border-transparent text-default hover:bg-accented/50"
       }
     },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
+    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"
+      }
     }
-  })
-
-export default createLocaleSelectorTheme()
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+})

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

@@ -47,6 +47,10 @@ export interface LocaleSelectorProps {
    * @default "md"
    */
   size?: "sm" | "md" | "lg"
+  /**
+   * The color theme mode override for this component.
+   */
+  theme?: "light" | "dark"
   /**
    * Slot-specific CSS class overrides.
    */

package/src/components/logo/RLALogo.astro

@@ -1,22 +1,13 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { LogoProps } from "./logo"
-import logoTheme from "./logo.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-
-const logo = scv(logoTheme)
+import { logoTheme } from "./logo.theme"
+import uiConfig from "virtual:rimelight/ui"
 
 const {
   variant = "logomark",
   mode,
-  theme,
   href = "/",
   alt,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as LogoProps;
 
@@ -34,10 +25,7 @@ if (href === "/") {
   }
 }
 
-const classes = resolveClasses(logo, {}, useUi("logo", uiProp), className);
-
-const globalConfig = getUIConfig();
-const rcLogos = globalConfig.logos as Record<string, any>;
+const classes = logoTheme(Astro.props);
 
 let logoSrc: string | null = null;
 let darkSrc: string | null = null;
@@ -60,19 +48,17 @@ function resolveLogo(pathStr: string | null | undefined): any {
   return pathStr;
 }
 
-if (rcLogos && typeof rcLogos === "object") {
-  let src = rcLogos[variant];
-  if (src && typeof src === "object") {
-    if (mode) {
-      logoSrc = resolveLogo(src[mode] || src.color);
-    } else {
-      logoSrc = resolveLogo(src.color || src.black || src.white);
-      darkSrc = resolveLogo(src.white || src.color);
-      lightSrc = resolveLogo(src.black || src.color);
-    }
-  } else if (typeof src === "string") {
-    logoSrc = resolveLogo(src);
+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("."));

package/src/components/logo/logo.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createLogoTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "flex items-center justify-center transition-opacity hover:opacity-80 shrink-0 select-none overflow-hidden"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createLogoTheme()
+export const logoTheme = defineTheme("logo", {
+  slots: ["root"],
+  base: {
+    root: "flex items-center justify-center transition-opacity hover:opacity-80 shrink-0 select-none overflow-hidden"
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/main/RLAMain.astro

@@ -1,37 +1,32 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { MainProps } from "./main"
-import mainTheme from "./main.theme"
-
-
-const main = scv(mainTheme)
-
-const {
-    as = "main",
-    ui: uiProp,
-    class: className,
-    ...rest
-} = Astro.props as MainProps;
-
-const classes = resolveClasses(main, {
-    hasContent: Astro.slots.has("default")
-}, useUi("main", uiProp), className);
-
-const Tag = as;
----
-
-<Tag
-        class:list={[classes.root, "rla-main-container"]}
-        data-slot="main"
-        {...rest}
-    >
-    <slot />
-</Tag>
-
-<style>
-  .rla-main-container {
-    padding-top: var(--rl-total-header-height, 4rem);
-  }
+---
+import type { MainProps } from "./main"
+import { mainTheme } from "./main.theme"
+
+
+
+const {
+  as = "main",
+  ...rest
+} = Astro.props as MainProps;
+
+const classes = mainTheme({
+  ...Astro.props,
+  hasContent: Astro.slots.has("default")
+});
+
+const Tag = as;
+---
+
+<Tag
+        class:list={[classes.root, "rla-main-container"]}
+        data-slot="main"
+        {...rest}
+    >
+    <slot />
+</Tag>
+
+<style>
+  .rla-main-container {
+    padding-top: var(--rl-total-header-height, 4rem);
+  }
 </style>

package/src/components/main/main.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createMainTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "min-h-[calc(100vh-var(--ui-header-height))]"
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createMainTheme()
+export const mainTheme = defineTheme("main", {
+  slots: ["root"],
+  base: {
+    root: "min-h-[calc(100vh-var(--rl-header-height))]"
+  },
+  variants: {},
+  defaultVariants: {}
+})