@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLANavigationMenu.astro

@@ -1,136 +1,326 @@
----
-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,
+  orientation = "horizontal",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as NavigationMenuProps
+
+const classes = resolveClasses(navigationMenu, { theme, orientation }, useUi("navigationMenu", uiProp), className)
+---
+
+<nav class={classes.root} data-slot="root" data-nav-menu data-orientation={orientation} {...rest}>
+  <ul class={classes.list} data-slot="list" role="list">
+    {items.map((item, i) => {
+      const hasChildren = item.children && item.children.length > 0
+      
+      const itemPath = (item.href ?? item.to ?? "#") as string
+      const normalizedPath = itemPath.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, '').replace(/\/+$/, '') || '/'
+      const currentPath = Astro.url.pathname.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, '').replace(/\/+$/, '') || '/'
+      
+      const isActive = item.active ?? (
+        normalizedPath !== '' && normalizedPath !== '/' 
+          ? currentPath.startsWith(normalizedPath)
+          : currentPath === '/'
+      )
+      
+      return (
+        <li class={classes.item} data-slot="item" data-nav-item data-index={i}>
+          {hasChildren ? (
+            <button
+              type="button"
+              class={classes.link}
+              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"
+              aria-current={isActive ? "page" : undefined}
+            >
+              {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 
+              data-item-index={i}
+              role="region"
+            >
+              {item.slot && Astro.slots.has(`${item.slot}-content`) ? (
+                <slot name={`${item.slot}-content`} />
+              ) : (
+                <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.viewportWrapper + " hidden"} data-slot="viewport-wrapper" data-nav-viewport-wrapper>
+    <div class={classes.viewport} data-slot="viewport" data-nav-viewport />
+  </div>
+</nav>
+
+<script>
+  document.querySelectorAll("[data-nav-menu]").forEach(menu => {
+    const orientation = menu.getAttribute("data-orientation") || "horizontal";
+    const items = menu.querySelectorAll("[data-nav-item]");
+    const viewportWrapper = orientation === "horizontal" ? menu.querySelector("[data-nav-viewport-wrapper]") : null as HTMLElement | null;
+    const viewport = orientation === "horizontal" ? menu.querySelector("[data-nav-viewport]") : null;
+
+    // Teleport viewport wrapper to body to escape parent transforms (e.g. translate-x on header)
+    if (viewportWrapper && viewportWrapper.parentNode !== document.body) {
+      document.body.appendChild(viewportWrapper);
+    }
+
+    let activeItem = null as HTMLElement | null;
+    let hoverTimeout = null as any;
+
+    const updatePosition = () => {
+      if (viewportWrapper && activeItem) {
+        const header = menu.closest("header") || document.querySelector("header");
+        if (header) {
+          const headerRect = header.getBoundingClientRect();
+          viewportWrapper.style.top = `${headerRect.bottom}px`;
+        }
+      }
+    };
+
+    window.addEventListener("scroll", updatePosition, { passive: true });
+    window.addEventListener("resize", updatePosition, { passive: true });
+
+    const open = (item: HTMLElement, trigger: HTMLElement, content: HTMLElement) => {
+      clearTimeout(hoverTimeout);
+      
+      // If there's another active item, close it first (horizontal viewport mode only)
+      if (orientation === "horizontal" && activeItem && activeItem !== item) {
+        close(activeItem);
+      }
+
+      if (orientation === "horizontal") {
+        activeItem = item;
+        updatePosition();
+      }
+
+      if (viewport) {
+        viewport.innerHTML = "";
+        viewport.appendChild(content);
+        content.classList.remove("hidden");
+        if (viewportWrapper) {
+          viewportWrapper.classList.remove("hidden");
+          viewportWrapper.setAttribute("data-state", "open");
+        }
+      } else {
+        content.classList.remove("hidden");
+      }
+
+      trigger.setAttribute("aria-expanded", "true");
+      trigger.setAttribute("data-state", "open");
+      const icon = trigger.querySelector(".i-lucide-chevron-down");
+      if (icon) (icon as HTMLElement).style.transform = "rotate(180deg)";
+    };
+
+    const close = (item: HTMLElement) => {
+      const trigger = item.querySelector("[data-nav-trigger]") as HTMLElement | null;
+      const itemIndex = item.getAttribute("data-index");
+      
+      // Find content - either inside viewport or inside the item
+      let content = item.querySelector("[data-nav-content]") as HTMLElement | null;
+      if (!content && viewport) {
+        content = viewport.querySelector(`[data-nav-content][data-item-index="${itemIndex}"]`) as HTMLElement | null;
+      }
+
+      if (content) {
+        content.classList.add("hidden");
+        // Move back to item
+        if (viewport && viewport.contains(content)) {
+          item.appendChild(content);
+        }
+      }
+
+      if (trigger) {
+        trigger.setAttribute("aria-expanded", "false");
+        trigger.setAttribute("data-state", "closed");
+        const icon = trigger.querySelector(".i-lucide-chevron-down");
+        if (icon) (icon as HTMLElement).style.transform = "";
+      }
+
+      if (orientation === "horizontal" && activeItem === item) {
+        activeItem = null;
+      }
+
+      // If no item is active, hide viewport (horizontal viewport mode only)
+      if (orientation === "horizontal" && !activeItem && viewportWrapper) {
+        viewportWrapper.classList.add("hidden");
+        viewportWrapper.setAttribute("data-state", "closed");
+        if (viewport) viewport.innerHTML = "";
+      }
+    };
+
+    const closeAll = () => {
+      items.forEach(item => {
+        close(item as HTMLElement);
+      });
+    };
+
+    items.forEach(itemNode => {
+      const item = itemNode as HTMLElement;
+      const trigger = item.querySelector("[data-nav-trigger]") as HTMLElement | null;
+      const content = item.querySelector("[data-nav-content]") as HTMLElement | null;
+
+      if (!trigger || !content) return;
+
+      // Click behavior (works everywhere, including mobile)
+      trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const isOpen = trigger.getAttribute("aria-expanded") === "true";
+        if (isOpen) {
+          close(item);
+        } else {
+          open(item, trigger, content);
+        }
+      });
+
+      // Hover behavior (horizontal desktop only)
+      if (orientation === "horizontal") {
+        item.addEventListener("mouseenter", () => {
+          clearTimeout(hoverTimeout);
+          open(item, trigger, content);
+        });
+
+        item.addEventListener("mouseleave", () => {
+          hoverTimeout = setTimeout(() => {
+            if (activeItem === item) {
+              close(item);
+            }
+          }, 150);
+        });
+      }
+    });
+
+    // Handle viewport wrapper hover so menu stays open when hovering the mega menu itself
+    if (viewportWrapper) {
+      viewportWrapper.addEventListener("mouseenter", () => {
+        clearTimeout(hoverTimeout);
+      });
+
+      viewportWrapper.addEventListener("mouseleave", () => {
+        hoverTimeout = setTimeout(() => {
+          if (activeItem) {
+            close(activeItem);
+          }
+        }, 150);
+      });
+    }
+
+    // Close on clicking outside
+    document.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+      if (!menu.contains(target) && (!viewportWrapper || !viewportWrapper.contains(target))) {
+        closeAll();
+      }
+    });
+  });
+</script>
+
+<style is:global>
+  /* Reset margins, borders, rounding, and rings on the main viewport container */
+  [data-nav-viewport] {
+    margin-top: 0 !important;
+    border: none !important;
+    border-width: 0px !important;
+    border-style: none !important;
+    border-color: transparent !important;
+    border-radius: 0 !important;
+    outline: none !important;
+    outline-width: 0px !important;
+    outline-color: transparent !important;
+    
+    /* Wiping out any UnoCSS/Tailwind rings on the viewport container */
+    --un-ring-width: 0px !important;
+    --tw-ring-width: 0px !important;
+    --un-ring-offset-width: 0px !important;
+    --tw-ring-offset-width: 0px !important;
+    --un-ring-color: transparent !important;
+    --tw-ring-color: transparent !important;
+    --un-ring-shadow: none !important;
+    --tw-ring-shadow: none !important;
+    --un-ring-offset-shadow: none !important;
+    --tw-ring-offset-shadow: none !important;
+    
+    /* Premium card shadow */
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.35), 0 8px 10px -6px rgb(0 0 0 / 0.35) !important; /* Premium shadow-xl */
+  }
+
+  /* Reset layout and strip standard dropdown styling (borders/shadows/padding) from teleported content nodes */
+  [data-nav-viewport] [data-nav-content] {
+    position: static !important;
+    width: 100% !important;
+    margin: 0 !important;
+    transform: none !important;
+    border: none !important;
+    border-width: 0px !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    background: transparent !important;
+    
+    /* Wiping out any UnoCSS/Tailwind rings on content */
+    --un-ring-width: 0px !important;
+    --tw-ring-width: 0px !important;
+    --un-ring-offset-width: 0px !important;
+    --tw-ring-offset-width: 0px !important;
+    --un-ring-color: transparent !important;
+    --tw-ring-color: transparent !important;
+    --un-ring-shadow: none !important;
+    --tw-ring-shadow: none !important;
+    --un-ring-offset-shadow: none !important;
+    --tw-ring-offset-shadow: none !important;
+    --un-shadow: none !important;
+    --tw-shadow: none !important;
+  }
+</style>

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>

package/src/components/astro/RLAPageHeader.astro

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

package/src/components/astro/RLAPageSection.astro

@@ -2,10 +2,14 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { PageSectionProps } from "../../types"
-import pageSectionTheme from "../../themes/page-section.theme"
+import pageSectionThemeDefault, { createPageSectionTheme } from "../../themes/page-section.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
 import RLAIcon from "./RLAIcon.astro"
 import RLAButton from "./RLAButton.astro"
 
+const uiConfig = getUIConfig()
+const pageSectionTheme = uiConfig.colors ? createPageSectionTheme() : pageSectionThemeDefault
+
 const pageSection = scv(pageSectionTheme)
 
 const {