@rimelight/ui 0.0.46 → 0.0.48

package/src/components/modal/RLSModal.tsx

@@ -1,10 +1,11 @@
 import {
   createMemo,
+  createSignal,
+  createEffect,
   splitProps,
   Show,
   onMount,
   onCleanup,
-  createEffect,
   type Component,
   type JSX
 } from "solid-js"
@@ -15,8 +16,11 @@ import RLSButton from "../button/RLSButton"
 export interface RLSModalProps extends ModalProps {
   onClose?: () => void
   children?: JSX.Element
+  trigger?: JSX.Element
+  triggerSlot?: JSX.Element
   titleSlot?: JSX.Element
   descriptionSlot?: JSX.Element
+  footer?: JSX.Element
   footerSlot?: JSX.Element
 }
 
@@ -26,6 +30,7 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
     "onClose",
     "title",
     "description",
+    "triggerLabel",
     "size",
     "closeOnClickOutside",
     "closeOnEscape",
@@ -34,32 +39,50 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
     "ui",
     "class",
     "children",
+    "trigger",
+    "triggerSlot",
     "titleSlot",
     "descriptionSlot",
+    "footer",
     "footerSlot"
   ])
 
+  const [internalOpen, setInternalOpen] = createSignal(props.open ?? false)
+  const isControlled = () => props.open !== undefined
+  const isOpen = () => (isControlled() ? !!props.open : internalOpen())
+
+  createEffect(() => {
+    if (props.open !== undefined) {
+      setInternalOpen(props.open)
+    }
+  })
+
   const closeOnClickOutside = () => props.closeOnClickOutside !== false
   const closeOnEscape = () => props.closeOnEscape !== false
   const unmountOnHide = () => props.unmountOnHide !== false
 
   const handleClose = () => {
+    if (!isControlled()) setInternalOpen(false)
     props.onClose?.()
   }
 
+  const handleOpen = () => {
+    if (!isControlled()) setInternalOpen(true)
+  }
+
+  let dialogRef: HTMLDialogElement | undefined
+
   onMount(() => {
     const handleCancel = (e: Event) => {
-      // Native Escape fires 'cancel' on the dialog element
       if (e.target !== dialogRef) return
       if (!closeOnEscape()) {
         e.preventDefault()
-      } else {
-        e.preventDefault()
+        return
       }
+      e.preventDefault()
       handleClose()
     }
     const handleClick = (e: MouseEvent) => {
-      // Clicking the ::backdrop means e.target IS the dialog element
       if (closeOnClickOutside() && e.target === dialogRef) {
         handleClose()
       }
@@ -80,81 +103,95 @@ const RLSModal: Component<RLSModalProps> = (allProps) => {
     })
   )
 
-  let dialogRef: HTMLDialogElement | undefined
-
   createEffect(() => {
     if (!dialogRef) return
-    if (props.open) {
-      if (!dialogRef.open) dialogRef.showModal()
+    if (isOpen()) {
+      if (!dialogRef.open && typeof dialogRef.showModal === "function") {
+        dialogRef.showModal()
+        if (props.lockScroll !== false) {
+          document.body.style.overflow = "hidden"
+        }
+      }
     } else {
-      if (dialogRef.open) dialogRef.close()
+      if (dialogRef.open && typeof dialogRef.close === "function") {
+        dialogRef.close()
+        if (props.lockScroll !== false) {
+          document.body.style.overflow = ""
+        }
+      }
     }
   })
 
+  const triggerContent = () => props.trigger ?? props.triggerSlot
+  const footerContent = () => props.footer ?? props.footerSlot
+
   return (
-    <Show when={props.open || !unmountOnHide()}>
-      <dialog
-        ref={(el) => (dialogRef = el)}
-        class={`w-[calc(100%-1.5rem)] sm:w-full rounded-xl border border-default bg-default p-5 sm:p-6 shadow-xl outline-none flex flex-col max-h-[calc(100dvh-1.5rem)] sm:max-h-[90vh] overflow-y-auto text-highlighted backdrop:bg-black/60 backdrop:backdrop-blur-sm ${
-          props.open ? "" : "hidden"
-        } ${resolvedClasses().content || ""}  ${props.class || ""}`}
-        data-state={props.open ? "open" : "closed"}
-        data-slot="content"
-        {...rest}
-      >
-        <RLSButton
+    <div class={resolvedClasses().root} data-slot="root">
+      {triggerContent() ? (
+        <span onClick={handleOpen}>{triggerContent()}</span>
+      ) : props.triggerLabel ? (
+        <button
           type="button"
-          variant="ghost"
-          color="neutral"
-          size="sm"
-          square
-          leadingIcon="close"
-          aria-label="Close modal"
-          data-slot="close-button"
-          class="absolute right-4 top-4 text-muted hover:text-highlighted"
-          onClick={handleClose}
-        />
-
-        {props.title || props.description || props.titleSlot || props.descriptionSlot ? (
-          <div class={resolvedClasses().header || "mb-4"} data-slot="header">
-            {props.titleSlot ? (
-              props.titleSlot
-            ) : props.title ? (
-              <h3
-                class={resolvedClasses().title || "text-lg font-semibold text-highlighted"}
-                data-slot="title"
-              >
-                {props.title}
-              </h3>
-            ) : null}
-
-            {props.descriptionSlot ? (
-              props.descriptionSlot
-            ) : props.description ? (
-              <p
-                class={resolvedClasses().description || "text-sm text-muted"}
-                data-slot="description"
-              >
-                {props.description}
-              </p>
-            ) : null}
-          </div>
-        ) : null}
-
-        {props.children}
-
-        {props.footerSlot ? (
-          <div
-            class={
-              resolvedClasses().footer || "flex justify-end gap-2 mt-6 pt-4 border-t border-default"
-            }
-            data-slot="footer"
-          >
-            {props.footerSlot}
-          </div>
-        ) : null}
-      </dialog>
-    </Show>
+          class={resolvedClasses().trigger}
+          data-slot="trigger"
+          onClick={handleOpen}
+        >
+          {props.triggerLabel}
+        </button>
+      ) : null}
+
+      <Show when={isOpen() || !unmountOnHide()}>
+        <dialog
+          ref={(el) => (dialogRef = el)}
+          class={resolvedClasses().content}
+          aria-modal="true"
+          data-state={isOpen() ? "open" : "closed"}
+          data-slot="content"
+          {...rest}
+        >
+          <RLSButton
+            type="button"
+            variant="ghost"
+            color="neutral"
+            size="sm"
+            square
+            leadingIcon="close"
+            aria-label="Close modal"
+            data-slot="close-button"
+            class={resolvedClasses().closeButton}
+            onClick={handleClose}
+          />
+
+          {props.title || props.description || props.titleSlot || props.descriptionSlot ? (
+            <div class={resolvedClasses().header} data-slot="header">
+              {props.titleSlot ? (
+                props.titleSlot
+              ) : props.title ? (
+                <h3 class={resolvedClasses().title} data-slot="title">
+                  {props.title}
+                </h3>
+              ) : null}
+
+              {props.descriptionSlot ? (
+                props.descriptionSlot
+              ) : props.description ? (
+                <p class={resolvedClasses().description} data-slot="description">
+                  {props.description}
+                </p>
+              ) : null}
+            </div>
+          ) : null}
+
+          {props.children}
+
+          {footerContent() ? (
+            <div class={resolvedClasses().footer} data-slot="footer">
+              {footerContent()}
+            </div>
+          ) : null}
+        </dialog>
+      </Show>
+    </div>
   )
 }
 

package/src/components/navigation-menu/RLANavigationMenu.astro

@@ -29,11 +29,11 @@ await Promise.all(
       {items.map((item, i) => {
         const hasChildren = item.children && item.children.length > 0
 
-        const itemPath = (item.href ?? item.to ?? "#") as string
+        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 ?? (
+        const isActive = item["active"] ?? (
           normalizedPath !== '' && normalizedPath !== '/'
             ? currentPath.startsWith(normalizedPath)
             : currentPath === '/'
@@ -56,7 +56,7 @@ await Promise.all(
               </button>
             ) : (
               <a
-                href={typeof item.href === "string" ? item.href : (typeof item.to === "string" ? item.to : "#")}
+                href={typeof item["href"] === "string" ? item["href"] : (typeof item["to"] === "string" ? item["to"] : "#")}
                 class={classes.link}
                 data-slot="link"
                 aria-current={isActive ? "page" : undefined}
@@ -81,12 +81,12 @@ await Promise.all(
                     {item.children!.map(child => (
                       <li>
                         <a
-                          href={typeof child.href === "string" ? child.href : (typeof child.to === "string" ? child.to : "#")}
+                          href={typeof child["href"] === "string" ? child["href"] : (typeof child["to"] === "string" ? child["to"] : "#")}
                           class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accented hover:text-highlighted transition-colors"
                         >
-                          {child.icon && <span class={child.icon + " mt-0.5 size-4 shrink-0 text-muted"} />}
+                          {child["icon"] && <span class={child["icon"] + " mt-0.5 size-4 shrink-0 text-muted"} />}
                           <div>
-                            <div class="font-medium leading-none">{child.label}</div>
+                            <div class="font-medium leading-none">{child["label"]}</div>
                             {child.description && (
                               <p class="mt-1 text-xs text-muted line-clamp-2">{child.description}</p>
                             )}

package/src/components/navigation-menu/RLSNavigationMenu.tsx

@@ -0,0 +1,228 @@
+import {
+  createMemo,
+  createSignal,
+  splitProps,
+  For,
+  onCleanup,
+  type Component,
+  type JSX
+} from "solid-js"
+import type {
+  NavigationMenuItem,
+  NavigationMenuChildItem,
+  NavigationMenuProps
+} from "./navigation-menu"
+import { navigationMenuTheme } from "./navigation-menu.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSNavigationMenuProps extends NavigationMenuProps {
+  children?: JSX.Element
+}
+
+const RLSNavigationMenu: Component<RLSNavigationMenuProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "items",
+    "color",
+    "orientation",
+    "theme",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const [openIndex, setOpenIndex] = createSignal<number | null>(null)
+
+  const items = createMemo(() => props.items ?? [])
+
+  const orientation = () => props.orientation ?? "horizontal"
+
+  const resolvedClasses = createMemo(() =>
+    navigationMenuTheme({
+      color: props.color ?? "primary",
+      orientation: orientation(),
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const currentPath = () => {
+    if (typeof window === "undefined") return ""
+    return (
+      window.location.pathname
+        .replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, "")
+        .replace(/\/+$/, "") || "/"
+    )
+  }
+
+  const isItemActive = (item: NavigationMenuItem) => {
+    if (item["active"] !== undefined) return !!item["active"]
+    const rawPath = (item["href"] ?? (item["to"] as string | undefined) ?? "#") as string
+    const normalizedPath =
+      rawPath.replace(/^\/[a-z]{2}(?:-[a-zA-Z]{2})?(?=\/|$)/, "").replace(/\/+$/, "") || "/"
+    const path = currentPath()
+    if (normalizedPath !== "" && normalizedPath !== "/") return path.startsWith(normalizedPath)
+    return path === "/"
+  }
+
+  let closeTimer: ReturnType<typeof setTimeout> | undefined
+
+  const openItem = (index: number) => {
+    if (closeTimer) clearTimeout(closeTimer)
+    setOpenIndex(index)
+  }
+
+  const closeAll = () => {
+    if (closeTimer) clearTimeout(closeTimer)
+    setOpenIndex(null)
+  }
+
+  const scheduleClose = () => {
+    if (closeTimer) clearTimeout(closeTimer)
+    closeTimer = setTimeout(() => {
+      setOpenIndex(null)
+    }, 150)
+  }
+
+  onCleanup(() => {
+    if (closeTimer) clearTimeout(closeTimer)
+  })
+
+  const itemHref = (item: NavigationMenuItem) =>
+    typeof item["href"] === "string"
+      ? item["href"]
+      : typeof item["to"] === "string"
+        ? item["to"]
+        : "#"
+
+  const childHref = (child: NavigationMenuChildItem) =>
+    typeof child["href"] === "string"
+      ? child["href"]
+      : typeof child["to"] === "string"
+        ? child["to"]
+        : "#"
+
+  return (
+    <nav
+      class={resolvedClasses().root}
+      data-slot="root"
+      data-theme={props.theme}
+      data-nav-menu
+      data-orientation={orientation()}
+      {...rest}
+    >
+      <ul class={resolvedClasses().list} data-slot="list" role="list">
+        <For each={items()}>
+          {(item, i) => {
+            const hasChildren = () => !!(item.children && item.children.length > 0)
+            const isActive = () => isItemActive(item)
+            const isOpen = () => openIndex() === i()
+
+            return (
+              <li
+                class={resolvedClasses().item}
+                data-slot="item"
+                data-nav-item
+                data-index={i()}
+                onMouseEnter={() => {
+                  if (orientation() === "horizontal" && hasChildren()) openItem(i())
+                }}
+                onMouseLeave={() => {
+                  if (orientation() === "horizontal" && hasChildren()) scheduleClose()
+                }}
+              >
+                {hasChildren() ? (
+                  <button
+                    type="button"
+                    class={resolvedClasses().trigger}
+                    data-slot="trigger"
+                    data-nav-trigger
+                    aria-expanded={isOpen() ? "true" : "false"}
+                    aria-haspopup="true"
+                    data-state={isOpen() ? "open" : "closed"}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      if (isOpen()) {
+                        closeAll()
+                      } else {
+                        openItem(i())
+                      }
+                    }}
+                  >
+                    {item.icon && <span class={`${item.icon} mr-1.5 size-4`} aria-hidden="true" />}
+                    {item.label}
+                    <RLSIcon
+                      name="chevronDown"
+                      class={`ml-1 size-3.5 transition-transform duration-200 ${isOpen() ? "rotate-180" : ""}`}
+                      aria-hidden="true"
+                      data-chevron
+                    />
+                  </button>
+                ) : (
+                  <a
+                    href={itemHref(item)}
+                    class={resolvedClasses().link}
+                    data-slot="link"
+                    aria-current={isActive() ? "page" : undefined}
+                  >
+                    {item.icon && <span class={`${item.icon} mr-1.5 size-4`} aria-hidden="true" />}
+                    {item.label}
+                  </a>
+                )}
+
+                {hasChildren() ? (
+                  <div
+                    class={`${resolvedClasses().content} ${isOpen() ? "" : "hidden"}`}
+                    data-slot="content"
+                    data-nav-content
+                    data-item-index={i()}
+                    role="region"
+                  >
+                    <ul role="list" class="py-1">
+                      <For each={item.children}>
+                        {(child) => (
+                          <li>
+                            <a
+                              href={childHref(child)}
+                              class="flex items-start gap-3 rounded-sm px-3 py-2 text-sm hover:bg-accented hover:text-highlighted transition-colors"
+                            >
+                              {child["icon"] && (
+                                <span
+                                  class={`${child["icon"]} mt-0.5 size-4 shrink-0 text-muted`}
+                                  aria-hidden="true"
+                                />
+                              )}
+                              <div>
+                                <div class="font-medium leading-none">{child["label"]}</div>
+                                {child["description"] && (
+                                  <p class="mt-1 text-xs text-muted line-clamp-2">
+                                    {child["description"]}
+                                  </p>
+                                )}
+                              </div>
+                            </a>
+                          </li>
+                        )}
+                      </For>
+                    </ul>
+                  </div>
+                ) : null}
+              </li>
+            )
+          }}
+        </For>
+      </ul>
+
+      {props.children}
+
+      <div
+        class={`${resolvedClasses().viewportWrapper} hidden`}
+        data-slot="viewport-wrapper"
+        data-nav-viewport-wrapper
+      >
+        <div class={resolvedClasses().viewport} data-slot="viewport" data-nav-viewport />
+      </div>
+    </nav>
+  )
+}
+
+export default RLSNavigationMenu

package/src/components/navigation-menu/navigation-menu.ts

@@ -26,7 +26,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, "type" | "raw" | "cu
    * Additional CSS classes to apply to the root element.
    */
   class?: any
-  [key: string]: unknown
+  [key: string]: any
 }
 
 export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, "type" | "ui"> {
@@ -56,5 +56,5 @@ export interface NavigationMenuProps {
    * Additional CSS classes to apply to the root element.
    */
   class?: any
-  [key: string]: unknown
+  [key: string]: any
 }