@rimelight/ui 0.0.47 → 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/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
 }

package/src/components/package-managers/RLSPackageManagers.tsx

@@ -0,0 +1,204 @@
+import { createMemo, createSignal, For, Show, splitProps, type Component } from "solid-js"
+import RLSButton from "../button/RLSButton"
+
+type Manager = "npm" | "pnpm" | "yarn" | "deno" | "bun" | "vp"
+type CommandType = "add" | "create" | "dlx" | "exec" | "install" | "remove" | "run"
+
+export interface RLSPackageManagersProps {
+  pkg?: string
+  type?: CommandType
+  dev?: boolean
+  args?: string
+  comment?: string
+  prefix?: string
+  managers?: Manager[]
+}
+
+const commands: Record<Manager, Partial<Record<CommandType, string>> & { dev: string }> = {
+  npm: {
+    add: "npm i",
+    create: "npm create",
+    dlx: "npx",
+    exec: "npx",
+    install: "npm install",
+    run: "npm run",
+    remove: "npm uninstall",
+    dev: "-D"
+  },
+  yarn: {
+    add: "yarn add",
+    create: "yarn create",
+    dlx: "yarn dlx",
+    exec: "yarn",
+    install: "yarn install",
+    run: "yarn run",
+    remove: "yarn remove",
+    dev: "-D"
+  },
+  pnpm: {
+    add: "pnpm add",
+    create: "pnpm create",
+    dlx: "pnpx",
+    exec: "pnpm",
+    install: "pnpm install",
+    run: "pnpm run",
+    remove: "pnpm remove",
+    dev: "-D"
+  },
+  deno: {
+    add: "deno add",
+    create: "deno run -A",
+    dlx: "deno run",
+    exec: "deno run",
+    install: "deno install",
+    run: "deno task",
+    remove: "deno remove",
+    dev: "--dev"
+  },
+  bun: {
+    add: "bun add",
+    create: "bun create",
+    install: "bun install",
+    run: "bun run",
+    remove: "bun remove",
+    dev: "-d"
+  },
+  vp: {
+    add: "vp add",
+    create: "vp create",
+    dlx: "vp dlx",
+    exec: "vp exec",
+    install: "vp install",
+    run: "vp run",
+    remove: "vp remove",
+    dev: "-D"
+  }
+}
+
+const RLSPackageManagers: Component<RLSPackageManagersProps> = (allProps) => {
+  const [props] = splitProps(allProps, [
+    "pkg",
+    "type",
+    "dev",
+    "args",
+    "comment",
+    "prefix",
+    "managers"
+  ])
+
+  const getCommand = (mgr: Manager, cmdType: CommandType): string | undefined => {
+    let cmd = commands[mgr][cmdType]
+    if (cmd === undefined) return undefined
+
+    if (props.prefix) cmd = `${props.prefix} ${cmd}`
+    if (props.comment) cmd = `# ${props.comment.replaceAll("{PKG}", mgr)}\n${cmd}`
+    if (props.dev && cmdType === "add") cmd += ` ${commands[mgr].dev}`
+
+    if (props.pkg) {
+      const processedPkg =
+        cmdType === "create" && mgr === "yarn"
+          ? props.pkg.replace(/@(?![^@]*\/)\S*$/, "")
+          : props.pkg
+      cmd += ` ${processedPkg}`
+    }
+
+    if (props.args) {
+      const needsDoubleDash = mgr === "npm" && !["dlx", "exec", "run"].includes(cmdType)
+      cmd += `${needsDoubleDash ? " --" : ""} ${props.args}`
+    }
+
+    return cmd
+  }
+
+  const tabs = createMemo(() =>
+    (props.managers ?? ["npm", "pnpm", "yarn", "deno", "bun", "vp"])
+      .map((mgr) => ({ mgr, cmd: getCommand(mgr, props.type ?? "add") }))
+      .filter((tab) => tab.cmd !== undefined)
+  )
+
+  const [activeIdx, setActiveIdx] = createSignal(0)
+  const [copied, setCopied] = createSignal<string | null>(null)
+
+  const copyCommand = async (mgr: string, cmd: string) => {
+    try {
+      await navigator.clipboard.writeText(cmd)
+      setCopied(mgr)
+      setTimeout(() => {
+        setCopied((current) => (current === mgr ? null : current))
+      }, 2000)
+    } catch {
+      setCopied(null)
+    }
+  }
+
+  return (
+    <div
+      class="w-full overflow-hidden rounded-xl border border-default bg-elevated/60"
+      data-slot="root"
+    >
+      <div
+        class="flex flex-wrap items-center gap-1 border-b border-default bg-elevated/80 px-2 pt-2"
+        role="tablist"
+        data-slot="list"
+      >
+        <For each={tabs()}>
+          {(tab, idx) => {
+            const active = idx() === activeIdx()
+            return (
+              <button
+                type="button"
+                role="tab"
+                class={`px-3 py-1.5 text-sm font-semibold rounded-t-lg transition-colors ${
+                  active
+                    ? "bg-default text-highlighted border border-default border-b-transparent"
+                    : "text-muted hover:text-highlighted"
+                }`}
+                data-slot="trigger"
+                data-state={active ? "active" : "inactive"}
+                data-value={tab.mgr}
+                aria-selected={active ? "true" : "false"}
+                onClick={() => setActiveIdx(idx())}
+              >
+                {tab.mgr}
+              </button>
+            )
+          }}
+        </For>
+      </div>
+
+      <For each={tabs()}>
+        {(tab, idx) => (
+          <div
+            role="tabpanel"
+            data-value={tab.mgr}
+            data-slot="content"
+            hidden={idx() !== activeIdx() ? "until-found" : undefined}
+          >
+            <Show when={idx() === activeIdx()}>
+              <div class="relative">
+                <pre class="overflow-x-auto bg-[#0a0a0f] px-4 py-3 pr-16 text-sm font-mono leading-6 text-[#e4e4e7] whitespace-pre">
+                  <code aria-hidden="true">{tab.cmd!}</code>
+                </pre>
+                <RLSButton
+                  type="button"
+                  variant="ghost"
+                  color="neutral"
+                  size="sm"
+                  class="absolute right-2 top-2"
+                  leadingIcon={copied() === tab.mgr ? "check" : "copy"}
+                  aria-label="Copy command"
+                  data-slot="copy-button"
+                  onClick={() => copyCommand(tab.mgr, tab.cmd!)}
+                >
+                  {copied() === tab.mgr ? "Copied" : "Copy"}
+                </RLSButton>
+              </div>
+            </Show>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+
+export default RLSPackageManagers