@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLANavigationMenu.astro

@@ -1,381 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { NavigationMenuProps } from "../../types"
-import navigationMenuThemeDefault, { createNavigationMenuTheme } from "../../themes/navigation-menu.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const navigationMenuTheme = uiConfig.colors ? createNavigationMenuTheme() : navigationMenuThemeDefault
-const navigationMenu = scv(navigationMenuTheme)
-
-const {
-  items = [],
-  color = "primary",
-  theme,
-  orientation = "horizontal",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as NavigationMenuProps & { theme?: string }
-
-const classes = resolveClasses(navigationMenu, { theme: theme as "dark", orientation }, useUi("navigationMenu", uiProp), className)
-
-const slotContents: Record<string, string> = {}
-await Promise.all(
-  items.map(async (item) => {
-    if (item.slot && Astro.slots.has(`${item.slot}-content`)) {
-      slotContents[`${item.slot}-content`] = await Astro.slots.render(`${item.slot}-content`)
-    }
-  })
-)
----
-
-<rla-navigation-menu orientation={orientation} {...rest}>
-  <nav class={classes.root} data-slot="root" data-nav-menu data-orientation={orientation}>
-    <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={typeof item.href === "string" ? item.href : (typeof item.to === "string" ? 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`) ? (
-                  <Fragment set:html={slotContents[`${item.slot}-content`]} />
-                ) : (
-                  <ul role="list" class="py-1">
-                    {item.children!.map(child => (
-                      <li>
-                        <a
-                          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-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>
-</rla-navigation-menu>
-
-<script>
-  class RLANavigationMenu extends HTMLElement {
-    private navCleanup: (() => void) | null = null;
-
-    connectedCallback() {
-      this.style.display = 'contents';
-      const menu = this.querySelector("[data-nav-menu]") as HTMLElement | null;
-      if (!menu) return;
-
-      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 (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");
-        
-        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");
-          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 (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);
-        });
-      };
-
-      const clickListeners: (() => void)[] = [];
-      const enterListeners: (() => void)[] = [];
-      const leaveListeners: (() => void)[] = [];
-
-      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;
-
-        const onClick = (e: MouseEvent) => {
-          e.stopPropagation();
-          const isOpen = trigger.getAttribute("aria-expanded") === "true";
-          if (isOpen) {
-            close(item);
-          } else {
-            open(item, trigger, content);
-          }
-        };
-        trigger.addEventListener("click", onClick);
-        clickListeners.push(() => trigger.removeEventListener("click", onClick));
-
-        if (orientation === "horizontal") {
-          const onMouseEnter = () => {
-            clearTimeout(hoverTimeout);
-            open(item, trigger, content);
-          };
-          const onMouseLeave = () => {
-            hoverTimeout = setTimeout(() => {
-              if (activeItem === item) {
-                close(item);
-              }
-            }, 150);
-          };
-          item.addEventListener("mouseenter", onMouseEnter);
-          item.addEventListener("mouseleave", onMouseLeave);
-          enterListeners.push(() => item.removeEventListener("mouseenter", onMouseEnter));
-          leaveListeners.push(() => item.removeEventListener("mouseleave", onMouseLeave));
-        }
-      });
-
-      let viewportEnter: (() => void) | null = null;
-      let viewportLeave: (() => void) | null = null;
-
-      if (viewportWrapper) {
-        const onVpEnter = () => {
-          clearTimeout(hoverTimeout);
-        };
-        const onVpLeave = () => {
-          hoverTimeout = setTimeout(() => {
-            if (activeItem) {
-              close(activeItem);
-            }
-          }, 150);
-        };
-        viewportWrapper.addEventListener("mouseenter", onVpEnter);
-        viewportWrapper.addEventListener("mouseleave", onVpLeave);
-        viewportEnter = () => viewportWrapper.removeEventListener("mouseenter", onVpEnter);
-        viewportLeave = () => viewportWrapper.removeEventListener("mouseleave", onVpLeave);
-      }
-
-      const onDocumentClick = (e: MouseEvent) => {
-        const target = e.target as HTMLElement;
-        if (!menu.contains(target) && (!viewportWrapper || !viewportWrapper.contains(target))) {
-          closeAll();
-        }
-      };
-      document.addEventListener("click", onDocumentClick);
-
-      this.navCleanup = () => {
-        window.removeEventListener("scroll", updatePosition);
-        window.removeEventListener("resize", updatePosition);
-        document.removeEventListener("click", onDocumentClick);
-        clickListeners.forEach(fn => fn());
-        enterListeners.forEach(fn => fn());
-        leaveListeners.forEach(fn => fn());
-        if (viewportEnter) viewportEnter();
-        if (viewportLeave) viewportLeave();
-        if (viewportWrapper && viewportWrapper.parentNode === document.body) {
-          viewportWrapper.remove();
-        }
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.navCleanup) {
-        this.navCleanup();
-        this.navCleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-navigation-menu')) {
-    customElements.define('rla-navigation-menu', RLANavigationMenu);
-  }
-</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/RLAPackageManagers.astro

@@ -1,81 +0,0 @@
----
-import RLATabs from "./RLATabs.astro";
-import { Code } from "astro:components";
-
-type Manager = "npm" | "pnpm" | "yarn" | "deno" | "bun" | "vp"
-type CommandType = "add" | "create" | "dlx" | "exec" | "install" | "remove" | "run"
-
-interface Props {
-  pkg?: string
-  type?: CommandType
-  dev?: boolean
-  args?: string
-  comment?: string
-  prefix?: string
-  managers?: Manager[]
-}
-
-const {
-  pkg,
-  type = "add",
-  dev = false,
-  args,
-  comment,
-  prefix,
-  managers = ["npm", "pnpm", "yarn", "deno", "bun", "vp"]
-} = Astro.props
-
-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" },
-}
-
-function getCommand(mgr: Manager, cmdType: CommandType): string | undefined {
-  let cmd = commands[mgr][cmdType]
-  if (cmd === undefined) return undefined
-
-  if (prefix) cmd = `${prefix} ${cmd}`
-  if (comment) cmd = `# ${comment.replaceAll("{PKG}", mgr)}\n${cmd}`
-  if (dev && cmdType === "add") cmd += ` ${commands[mgr].dev}`
-
-  if (pkg) {
-    // Logic to strip version tags for yarn create
-    const processedPkg = (cmdType === "create" && mgr === "yarn")
-        ? pkg.replace(/@(?![^@]*\/)\S*$/, "")
-        : pkg
-    cmd += ` ${processedPkg}`
-  }
-
-  if (args) {
-    const needsDoubleDash = mgr === "npm" && !["dlx", "exec", "run"].includes(cmdType)
-    cmd += `${needsDoubleDash ? " --" : ""} ${args}`
-  }
-
-  return cmd
-}
-
-const tabs = managers
-    .map((mgr) => ({
-      mgr,
-      cmd: getCommand(mgr, type),
-    }))
-    .filter((tab) => tab.cmd !== undefined)
-
-const tabItems = tabs.map((tab) => ({
-  value: tab.mgr,
-  label: tab.mgr,
-}))
-
----
-
-<RLATabs items={tabItems} color="primary" size="md" variant="solid">
-  {tabs.map((tab, idx) => (
-    <div role="tabpanel" data-value={tab.mgr} class:list={[{ "hidden": idx !== 0 }]}>
-      <Code code={tab.cmd!} lang="bash" />
-    </div>
-  ))}
-</RLATabs>

package/src/components/astro/RLAPage.astro

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