@rimelight/ui 0.0.32 → 0.0.33

package/src/components/astro/RLAMeter.astro

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

package/src/components/astro/RLAModal.astro

@@ -1,95 +1,99 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ModalProps } from "../../types"
-import modalTheme from "../../themes/modal.theme"
-
-const modal = scv(modalTheme)
-
-const {
-  open = false,
-  triggerLabel,
-  closeOnClickOutside = true,
-  closeOnEscape = true,
-  lockScroll = true,
-  title,
-  description,
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ModalProps
-
-const classes = resolveClasses(modal, {
-  size
-}, useUi("modal", uiProp), className)
-
-const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
----
-<div class={classes.root} data-slot="modal-container">
-  {triggerLabel ? (
-    <button
-      class={classes.trigger}
-      data-slot="trigger"
-      type="button"
-      onclick={`document.getElementById('${modalId}').showmodal()`}
-    >
-      {triggerLabel}
-    </button>
-  ) : (
-    <span onclick={`document.getElementById('${modalId}').showmodal()`}>
-      <slot name="trigger" />
-    </span>
-  )}
-
-  <dialog
-    id={modalId}
-    class={classes.content}
-    data-slot="content"
-    data-lock-scroll={lockScroll ? "true" : "false"}
-    data-close-on-escape={closeOnEscape ? "true" : "false"}
-    data-close-on-click-outside={closeOnClickOutside ? "true" : "false"}
-    {...rest}
-  >
-    <button
-      class={classes.closeButton}
-      data-slot="close-button"
-      type="button"
-      onclick={`document.getElementById('${modalId}').close()`}
-      aria-label="Close modal"
-    >
-      <span class="i-lucide-x size-4" aria-hidden="true" />
-    </button>
-
-    <div class={classes.header} data-slot="header">
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-      <slot name="title" />
-      
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-      <slot name="description" />
-    </div>
-
-    <slot />
-
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer" />
-    </div>
-  </dialog>
-</div>
-
-<script is:inline>
-  document.addEventListener('click', (e) => {
-    if (e.target && e.target.tagName === 'DIALOG' && e.target.getAttribute('data-close-on-click-outside') === 'true') {
-      const rect = e.target.getBoundingClientRect();
-      const isInModal = (
-        rect.top <= e.clientY &&
-        e.clientY <= rect.top + rect.height &&
-        rect.left <= e.clientX &&
-        e.clientX <= rect.left + rect.width
-      );
-      if (!isInModal) {
-        e.target.close();
-      }
-    }
-  });
-</script>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ModalProps } from "../../types"
+import modalThemeDefault, { createModalTheme } from "../../themes/modal.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const modalTheme = uiConfig.colors ? createModalTheme() : modalThemeDefault
+
+const modal = scv(modalTheme)
+
+const {
+  open = false,
+  triggerLabel,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  lockScroll = true,
+  title,
+  description,
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ModalProps
+
+const classes = resolveClasses(modal, {
+  size
+}, useUi("modal", uiProp), className)
+
+const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="modal-container">
+  {triggerLabel ? (
+    <button
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      onclick={`document.getElementById('${modalId}').showmodal()`}
+    >
+      {triggerLabel}
+    </button>
+  ) : (
+    <span onclick={`document.getElementById('${modalId}').showmodal()`}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={modalId}
+    class={classes.content}
+    data-slot="content"
+    data-lock-scroll={lockScroll ? "true" : "false"}
+    data-close-on-escape={closeOnEscape ? "true" : "false"}
+    data-close-on-click-outside={closeOnClickOutside ? "true" : "false"}
+    {...rest}
+  >
+    <button
+      class={classes.closeButton}
+      data-slot="close-button"
+      type="button"
+      onclick={`document.getElementById('${modalId}').close()`}
+      aria-label="Close modal"
+    >
+      <span class="i-lucide-x size-4" aria-hidden="true" />
+    </button>
+
+    <div class={classes.header} data-slot="header">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      <slot name="title" />
+      
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot name="description" />
+    </div>
+
+    <slot />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</div>
+
+<script is:inline>
+  document.addEventListener('click', (e) => {
+    if (e.target && e.target.tagName === 'DIALOG' && e.target.getAttribute('data-close-on-click-outside') === 'true') {
+      const rect = e.target.getBoundingClientRect();
+      const isInModal = (
+        rect.top <= e.clientY &&
+        e.clientY <= rect.top + rect.height &&
+        rect.left <= e.clientX &&
+        e.clientX <= rect.left + rect.width
+      );
+      if (!isInModal) {
+        e.target.close();
+      }
+    }
+  });
+</script>

package/src/components/astro/RLANavigationMenu.astro

@@ -1,136 +1,137 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { NavigationMenuProps } from "../../types"
-import navigationMenuThemeDefault, { createNavigationMenuTheme } from "../../themes/navigation-menu.theme"
-
-const navigationMenuTheme = navigationMenuThemeDefault
-const navigationMenu = scv(navigationMenuTheme)
-
-const {
-  items = [],
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as NavigationMenuProps
-
-const classes = resolveClasses(navigationMenu, {}, useUi("navigationMenu", uiProp), className)
----
-
-<nav class={classes.root} data-slot="root" data-nav-menu {...rest}>
-  <ul class={classes.list} data-slot="list" role="list">
-    {items.map((item, i) => {
-      const hasChildren = item.children && item.children.length > 0
-      return (
-        <li class={classes.item} data-slot="item" data-nav-item>
-          {hasChildren ? (
-            <button
-              type="button"
-              class={classes.trigger}
-              data-slot="trigger"
-              data-nav-trigger
-              aria-expanded="false"
-              aria-haspopup="true"
-            >
-              {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
-              {item.label}
-              <span class="i-lucide-chevron-down ml-1 size-3.5 transition-transform duration-200" aria-hidden="true" />
-            </button>
-          ) : (
-            <a
-              href={item.href ?? "#"}
-              class={classes.link}
-              data-slot="link"
-            >
-              {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
-              {item.label}
-            </a>
-          )}
-
-          {hasChildren && (
-            <div class={classes.content + " hidden"} data-slot="content" data-nav-content role="region">
-              <ul role="list" class="py-1">
-                {item.children!.map(child => (
-                  <li>
-                    <a
-                      href={child.href ?? "#"}
-                      class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
-                    >
-                      {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted-foreground"} />}
-                      <div>
-                        <div class="font-medium leading-none">{child.label}</div>
-                        {child.description && (
-                          <p class="mt-1 text-xs text-muted-foreground line-clamp-2">{child.description}</p>
-                        )}
-                      </div>
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </li>
-      )
-    })}
-  </ul>
-
-  <slot />
-
-  <div class={classes.viewport} data-slot="viewport" />
-</nav>
-
-<script>
-  document.querySelectorAll("[data-nav-menu]").forEach(menu => {
-    const items = menu.querySelectorAll("[data-nav-item]");
-
-    items.forEach(item => {
-      const trigger = item.querySelector("[data-nav-trigger]");
-      const content = item.querySelector("[data-nav-content]");
-
-      if (!trigger || !content) return;
-
-      const open = () => {
-        content.classList.remove("hidden");
-        trigger.setAttribute("aria-expanded", "true");
-        const icon = trigger.querySelector(".i-lucide-chevron-down");
-        if (icon) (icon as HTMLElement).style.transform = "rotate(180deg)";
-      };
-
-      const close = () => {
-        content.classList.add("hidden");
-        trigger.setAttribute("aria-expanded", "false");
-        const icon = trigger.querySelector(".i-lucide-chevron-down");
-        if (icon) (icon as HTMLElement).style.transform = "";
-      };
-
-      trigger.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const isOpen = !content.classList.contains("hidden");
-        // Close all others
-        items.forEach(other => {
-          const otherContent = other.querySelector("[data-nav-content]");
-          const otherTrigger = other.querySelector("[data-nav-trigger]");
-          if (otherContent && !otherContent.classList.contains("hidden")) {
-            otherContent.classList.add("hidden");
-            otherTrigger?.setAttribute("aria-expanded", "false");
-            const icon = otherTrigger?.querySelector(".i-lucide-chevron-down");
-            if (icon) (icon as HTMLElement).style.transform = "";
-          }
-        });
-        if (!isOpen) open();
-      });
-    });
-
-    document.addEventListener("click", () => {
-      items.forEach(item => {
-        const content = item.querySelector("[data-nav-content]");
-        const trigger = item.querySelector("[data-nav-trigger]");
-        if (content) content.classList.add("hidden");
-        if (trigger) trigger.setAttribute("aria-expanded", "false");
-        const icon = trigger?.querySelector(".i-lucide-chevron-down");
-        if (icon) (icon as HTMLElement).style.transform = "";
-      });
-    });
-  });
-</script>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { NavigationMenuProps } from "../../types"
+import navigationMenuThemeDefault, { createNavigationMenuTheme } from "../../themes/navigation-menu.theme"
+
+const navigationMenuTheme = navigationMenuThemeDefault
+const navigationMenu = scv(navigationMenuTheme)
+
+const {
+  items = [],
+  color = "primary",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as NavigationMenuProps
+
+const classes = resolveClasses(navigationMenu, { theme }, useUi("navigationMenu", uiProp), className)
+---
+
+<nav class={classes.root} data-slot="root" data-nav-menu {...rest}>
+  <ul class={classes.list} data-slot="list" role="list">
+    {items.map((item, i) => {
+      const hasChildren = item.children && item.children.length > 0
+      return (
+        <li class={classes.item} data-slot="item" data-nav-item>
+          {hasChildren ? (
+            <button
+              type="button"
+              class={classes.trigger}
+              data-slot="trigger"
+              data-nav-trigger
+              aria-expanded="false"
+              aria-haspopup="true"
+            >
+              {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
+              {item.label}
+              <span class="i-lucide-chevron-down ml-1 size-3.5 transition-transform duration-200" aria-hidden="true" />
+            </button>
+          ) : (
+            <a
+              href={item.href ?? item.to ?? "#"}
+              class={classes.link}
+              data-slot="link"
+            >
+              {item.icon && <span class={item.icon + " mr-1.5 size-4"} />}
+              {item.label}
+            </a>
+          )}
+
+          {hasChildren && (
+            <div class={classes.content + " hidden"} data-slot="content" data-nav-content role="region">
+              <ul role="list" class="py-1">
+                {item.children!.map(child => (
+                  <li>
+                    <a
+                      href={child.href ?? child.to ?? "#"}
+                      class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+                    >
+                      {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted-foreground"} />}
+                      <div>
+                        <div class="font-medium leading-none">{child.label}</div>
+                        {child.description && (
+                          <p class="mt-1 text-xs text-muted-foreground line-clamp-2">{child.description}</p>
+                        )}
+                      </div>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </li>
+      )
+    })}
+  </ul>
+
+  <slot />
+
+  <div class={classes.viewport} data-slot="viewport" />
+</nav>
+
+<script>
+  document.querySelectorAll("[data-nav-menu]").forEach(menu => {
+    const items = menu.querySelectorAll("[data-nav-item]");
+
+    items.forEach(item => {
+      const trigger = item.querySelector("[data-nav-trigger]");
+      const content = item.querySelector("[data-nav-content]");
+
+      if (!trigger || !content) return;
+
+      const open = () => {
+        content.classList.remove("hidden");
+        trigger.setAttribute("aria-expanded", "true");
+        const icon = trigger.querySelector(".i-lucide-chevron-down");
+        if (icon) (icon as HTMLElement).style.transform = "rotate(180deg)";
+      };
+
+      const close = () => {
+        content.classList.add("hidden");
+        trigger.setAttribute("aria-expanded", "false");
+        const icon = trigger.querySelector(".i-lucide-chevron-down");
+        if (icon) (icon as HTMLElement).style.transform = "";
+      };
+
+      trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const isOpen = !content.classList.contains("hidden");
+        // Close all others
+        items.forEach(other => {
+          const otherContent = other.querySelector("[data-nav-content]");
+          const otherTrigger = other.querySelector("[data-nav-trigger]");
+          if (otherContent && !otherContent.classList.contains("hidden")) {
+            otherContent.classList.add("hidden");
+            otherTrigger?.setAttribute("aria-expanded", "false");
+            const icon = otherTrigger?.querySelector(".i-lucide-chevron-down");
+            if (icon) (icon as HTMLElement).style.transform = "";
+          }
+        });
+        if (!isOpen) open();
+      });
+    });
+
+    document.addEventListener("click", () => {
+      items.forEach(item => {
+        const content = item.querySelector("[data-nav-content]");
+        const trigger = item.querySelector("[data-nav-trigger]");
+        if (content) content.classList.add("hidden");
+        if (trigger) trigger.setAttribute("aria-expanded", "false");
+        const icon = trigger?.querySelector(".i-lucide-chevron-down");
+        if (icon) (icon as HTMLElement).style.transform = "";
+      });
+    });
+  });
+</script>

package/src/components/astro/RLAPage.astro

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

package/src/components/astro/RLAPageAside.astro

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

package/src/components/astro/RLAPageBody.astro

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