@rimelight/ui 0.0.31 → 0.0.33

package/src/components/astro/{RLADialog.astro → RLAModal.astro}

@@ -1,95 +1,99 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DialogProps } from "../../types"
-import dialogTheme from "../../themes/dialog.theme"
-
-const dialog = scv(dialogTheme)
-
-const {
-  open = false,
-  triggerLabel,
-  closeOnClickOutside = true,
-  closeOnEscape = true,
-  lockScroll = true,
-  title,
-  description,
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DialogProps
-
-const classes = resolveClasses(dialog, {
-  size
-}, useUi("dialog", uiProp), className)
-
-const dialogId = `rla-dialog-${Math.random().toString(36).substring(2, 9)}`
----
-<div class={classes.root} data-slot="dialog-container">
-  {triggerLabel ? (
-    <button
-      class={classes.trigger}
-      data-slot="trigger"
-      type="button"
-      onclick={`document.getElementById('${dialogId}').showModal()`}
-    >
-      {triggerLabel}
-    </button>
-  ) : (
-    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
-      <slot name="trigger" />
-    </span>
-  )}
-
-  <dialog
-    id={dialogId}
-    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('${dialogId}').close()`}
-      aria-label="Close dialog"
-    >
-      <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 isInDialog = (
-        rect.top <= e.clientY &&
-        e.clientY <= rect.top + rect.height &&
-        rect.left <= e.clientX &&
-        e.clientX <= rect.left + rect.width
-      );
-      if (!isInDialog) {
-        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/navigationMenu.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

@@ -0,0 +1,23 @@
+---
+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

@@ -0,0 +1,23 @@
+---
+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

@@ -0,0 +1,23 @@
+---
+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

@@ -0,0 +1,23 @@
+---
+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/{RLASection.astro → RLAPageSection.astro}

@@ -1,12 +1,16 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { SectionProps } from "../../types"
-import sectionTheme from "../../themes/section.theme"
+import type { PageSectionProps } from "../../types"
+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 section = scv(sectionTheme)
+const uiConfig = getUIConfig()
+const pageSectionTheme = uiConfig.colors ? createPageSectionTheme() : pageSectionThemeDefault
+
+const pageSection = scv(pageSectionTheme)
 
 const {
   as = "section",
@@ -22,9 +26,9 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as SectionProps;
+} = Astro.props as PageSectionProps;
 
-const classes = resolveClasses(section, {
+const classes = resolveClasses(pageSection, {
   variant,
   orientation,
   reverse,
@@ -33,7 +37,7 @@ const classes = resolveClasses(section, {
   title: !!(Astro.slots.has("title") || title),
   description: !!(Astro.slots.has("description") || description),
   body: Astro.slots.has("body")
-}, useUi("section", uiProp), className);
+}, useUi("pageSection", uiProp), className);
 
 const hasDefaultSlot = Astro.slots.has("default");