@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLAKbd.astro

@@ -1,22 +1,32 @@
----
-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>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { KbdProps } from "../../types"
+import kbdThemeDefault, { createKbdTheme } from "../../themes/kbd.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const kbdTheme = uiConfig.colors ? createKbdTheme() : kbdThemeDefault
+
+const kbd = scv(kbdTheme)
+
+const {
+  size = "md",
+  color = "neutral",
+  variant = "outline",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as KbdProps
+
+const classes = resolveClasses(kbd, {
+  size,
+  color,
+  variant,
+  theme
+}, useUi("kbd", uiProp), className)
+---
+<kbd class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</kbd>

package/src/components/astro/RLAKnob.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { KnobProps } from "../../types"
-import knobThemeDefault from "../../themes/knob.theme"
-
-const knob = scv(knobThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as KnobProps
-
-const classes = resolveClasses(knob, {}, useUi("knob", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { KnobProps } from "../../types"
+import knobThemeDefault, { createKnobTheme } from "../../themes/knob.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const knobTheme = uiConfig.colors ? createKnobTheme() : knobThemeDefault
+
+const knob = scv(knobTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as KnobProps
+
+const classes = resolveClasses(knob, {}, useUi("knob", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLALabel.astro

@@ -1,23 +1,27 @@
----
-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>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LabelProps } from "../../types"
+import labelThemeDefault, { createLabelTheme } from "../../themes/label.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const labelTheme = uiConfig.colors ? createLabelTheme() : labelThemeDefault
+
+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>

package/src/components/astro/RLALink.astro

@@ -1,19 +1,22 @@
 ---
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
+import RLAButton from "./RLAButton.astro"
 import type { LinkProps } from "../../types"
-import linkThemeDefault from "../../themes/link.theme"
-
-const link = scv(linkThemeDefault)
 
 const {
-  ui: uiProp,
-  class: className,
+  to,
+  href,
+  variant = "link",
+  color = "neutral",
   ...rest
 } = Astro.props as LinkProps
 
-const classes = resolveClasses(link, {}, useUi("link", uiProp), className);
+const linkHref = href || (typeof to === 'string' ? to : undefined);
 ---
-<div class={classes.root} data-slot="root" {...rest}>
+<RLAButton
+  variant={variant as any}
+  color={color as any}
+  href={linkHref}
+  {...rest}
+>
   <slot />
-</div>
+</RLAButton>

package/src/components/astro/RLALinkGroup.astro

@@ -1,19 +1,100 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LinkGroupProps } from "../../types"
-import linkGroupThemeDefault from "../../themes/link-group.theme"
-
-const linkGroup = scv(linkGroupThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as LinkGroupProps
-
-const classes = resolveClasses(linkGroup, {}, useUi("linkGroup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LinkGroupProps } from "../../types"
+import linkGroupThemeDefault, { createLinkGroupTheme } from "../../themes/link-group.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+import RLALink from "./RLALink.astro"
+
+const uiConfig = getUIConfig()
+const linkGroupTheme = uiConfig.colors ? createLinkGroupTheme() : linkGroupThemeDefault
+
+const linkGroup = scv(linkGroupTheme)
+
+const {
+  title,
+  label,
+  leadingIcon,
+  trailingIcon,
+  href,
+  to,
+  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);
+const headingTo = to || (typeof title === "object" ? (title as any).to : undefined);
+
+const linksProp = links ?? [];
+const normalizedLinks = Array.isArray(linksProp) ? linksProp : [linksProp];
+
+// Prefix utility classes in classes.link with `!` to cleanly override conflicting text colors in RLAButton's base classes.
+// For default or light themes, do not force base text classes so RLAButton's own light/dark mode styles can adapt naturally.
+const isPinnedDark = theme === "flat" || 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 || headingTo ? (
+        <a href={headingHref || (typeof headingTo === 'string' ? headingTo : undefined)} class="hover:underline flex items-center gap-1.5">
+          {headingLeadingIcon && <span class={headingLeadingIcon} />}
+          <span>{headingLabel}</span>
+          {headingTrailingIcon && <span class={headingTrailingIcon} />}
+        </a>
+      ) : (
+        <span class="flex items-center gap-1.5">
+          {headingLeadingIcon && <span class={headingLeadingIcon} />}
+          <span>{headingLabel}</span>
+          {headingTrailingIcon && <span class={headingTrailingIcon} />}
+        </span>
+      )}
+    </h4>
+  )}
+  
+  <ul class={classes.list} data-slot="list">
+    <slot>
+      {normalizedLinks.map((link) => (
+        <li class={classes.item} data-slot="item">
+          <RLALink
+            variant={link.variant ?? "ghost"}
+            color={link.color ?? "neutral"}
+            theme={link.theme ?? theme}
+            class:list={[overrideLinkClass, "w-full !justify-start"]}
+            data-slot="link"
+            {...link}
+          >
+            {link.label}
+          </RLALink>
+        </li>
+      ))}
+    </slot>
+  </ul>
 </div>

package/src/components/astro/RLAListbox.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ListboxProps } from "../../types"
-import listboxThemeDefault from "../../themes/listbox.theme"
-
-const listbox = scv(listboxThemeDefault)
-
-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 { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ListboxProps } from "../../types"
+import listboxThemeDefault, { createListboxTheme } from "../../themes/listbox.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const listboxTheme = uiConfig.colors ? createListboxTheme() : listboxThemeDefault
+
+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/astro/RLALocaleSelector.astro

@@ -1,110 +1,137 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { LocaleSelectorProps } from "../../types"
-import localeSelectorTheme from "../../themes/locale-selector.theme"
-import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n";
-
-const localeSelector = scv(localeSelectorTheme)
-
-const {
-    locales,
-    variant = "default",
-    size = "md",
-    ui: uiProp,
-    class: className,
-    ...rest
-} = Astro.props as LocaleSelectorProps;
-
-const classes = resolveClasses(localeSelector, {
-    variant,
-    size
-}, useUi("localeSelector", uiProp), className);
-
-const currentLocale = Astro.currentLocale ?? 'en';
-const localeUrls = [...new Map(getRelativeLocaleUrlList().map(url => {
-    const locale = url.split('/')[1] || 'en';
-    return [locale, url];
-})).values()];
-
-const processedLocales = locales && locales.length > 0
-    ? locales.map(item => typeof item === 'string' ? { code: item, label: item } : item)
-    : [...new Map(getRelativeLocaleUrlList().map(url => {
-        const locale = url.split('/')[1] || 'en';
-        return [locale, { code: locale, label: locale }];
-    })).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();
-    }
-}
----
-
-<div class:list={[classes.root]} {...rest}>
-    {Astro.slots.has("label") && (
-            <label for="language-picker" class:list={[classes.label]}>
-                <slot name="label" />
-            </label>
-    )}
-
-    <div class:list={[classes.wrapper]}>
-        <select
-                id="language-picker"
-                class:list={[classes.select]}
-                aria-label="Select language"
-                data-variant={variant}
-                data-size={size}
-        >
-            {processedLocales.map((item) => {
-                const targetUrl = getRelativeLocaleUrl(item.code, Astro.url.pathname.replace(/^\/[^/]+/, ''));
-                return (
-                        <option
-                                value={targetUrl}
-                                selected={currentLocale === item.code}
-                                class:list={[classes.option]}
-                        >
-                            {item.label !== item.code ? item.label : getLocaleDisplayName(item.code)}
-                        </option>
-                );
-            })}
-        </select>
-
-        <div class:list={[classes.iconWrapper]}>
-            <slot name="icon">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 opacity-70">
-                    <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
-                </svg>
-            </slot>
-        </div>
-    </div>
-</div>
-
-<script>
-    const initializeLanguagePicker = () => {
-        const languagePickers = document.querySelectorAll('#language-picker');
-
-        languagePickers.forEach(picker => {
-            if (picker.hasAttribute('data-initialized')) return;
-            picker.setAttribute('data-initialized', 'true');
-
-            picker.addEventListener('change', (event) => {
-                const target = event.target as HTMLSelectElement;
-                const targetUrl = target.value;
-                if (targetUrl) {
-                    window.location.href = targetUrl;
-                }
-            });
-        });
-    };
-
-    document.addEventListener('DOMContentLoaded', initializeLanguagePicker);
-    document.addEventListener('astro:page-load', initializeLanguagePicker);
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LocaleSelectorProps } from "../../types"
+import localeSelectorThemeDefault, { createLocaleSelectorTheme } from "../../themes/locale-selector.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n"
+import RLASelect from "./RLASelect.astro"
+
+const uiConfig = getUIConfig()
+const localeSelectorTheme = uiConfig.colors ? createLocaleSelectorTheme() : localeSelectorThemeDefault
+
+const localeSelector = scv(localeSelectorTheme)
+
+const {
+    locales,
+    variant = "default",
+    size = "md",
+    ui: uiProp,
+    class: className,
+    ...rest
+} = Astro.props as LocaleSelectorProps;
+
+const classes = resolveClasses(localeSelector, {
+    variant,
+    size
+}, useUi("localeSelector", uiProp), className);
+
+const currentLocale = Astro.currentLocale ?? 'en';
+
+const processedLocales = locales && locales.length > 0
+    ? locales.map(item => typeof item === 'string' ? { code: item, label: item } : item)
+    : [...new Map(getRelativeLocaleUrlList().map(url => {
+        const locale = url.split('/')[1] || 'en';
+        return [locale, { code: locale, label: locale }];
+    })).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) => {
+    const targetUrl = getRelativeLocaleUrl(item.code, Astro.url.pathname.replace(/^\/[^/]+/, ''));
+    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 isDefault = variant === "default";
+const triggerDarkModeOverrides = isDefault 
+    ? "dark:!bg-neutral-800 dark:!text-white dark:hover:!bg-neutral-700" 
+    : "";
+
+const selectUi = {
+    root: "!w-fit !inline-flex",
+    trigger: `flex items-center justify-between !w-fit ${gapClass} ${overrideTriggerClass} ${triggerDarkModeOverrides}`,
+    content: "!min-w-0 !w-full !bg-white !border-gray-200 !text-gray-800 dark:!bg-neutral-900 dark:!border-neutral-800 dark:!text-white",
+    item: "!text-gray-700 hover:!bg-gray-100 hover:!text-gray-900 dark:!text-neutral-300 dark:hover:!bg-neutral-800 dark:hover:!text-white"
+};
+---
+
+<div class:list={[classes.root]} data-locale-selector {...rest}>
+    {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>
+
+<script>
+    const initializeLocaleSelector = () => {
+        const selectors = document.querySelectorAll('[data-locale-selector]');
+
+        selectors.forEach(selector => {
+            if (selector.hasAttribute('data-initialized')) return;
+            selector.setAttribute('data-initialized', 'true');
+
+            const hiddenInput = selector.querySelector('[data-select-hidden-input]') as HTMLInputElement;
+            if (!hiddenInput) return;
+
+            hiddenInput.addEventListener('change', (event) => {
+                const target = event.target as HTMLInputElement;
+                const targetUrl = target.value;
+                if (targetUrl) {
+                    window.location.href = targetUrl;
+                }
+            });
+        });
+    };
+
+    document.addEventListener('DOMContentLoaded', initializeLocaleSelector);
+    document.addEventListener('astro:page-load', initializeLocaleSelector);
 </script>