@rimelight/ui 0.0.30 → 0.0.32

package/src/components/astro/RLANavigationMenu.astro

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

package/src/components/astro/RLAPage.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAPageAside.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAPageBody.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAPageHeader.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/{RLASection.astro → RLAPageSection.astro}

@@ -1,12 +1,12 @@
 ---
 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 pageSectionTheme from "../../themes/page-section.theme"
 import RLAIcon from "./RLAIcon.astro"
 import RLAButton from "./RLAButton.astro"
 
-const section = scv(sectionTheme)
+const pageSection = scv(pageSectionTheme)
 
 const {
   as = "section",
@@ -22,9 +22,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 +33,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");
 

package/src/components/astro/RLAPagination.astro

@@ -0,0 +1,94 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PaginationProps } from "../../types"
+import paginationTheme from "../../themes/pagination.theme"
+
+const pagination = scv(paginationTheme)
+
+const {
+  currentPage = 1,
+  totalPages = 1,
+  baseUrl = "?page=",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PaginationProps
+
+const classes = resolveClasses(pagination, {}, useUi("pagination", uiProp), className)
+
+const getPageNumbers = () => {
+  const pages: (number | "ellipsis")[] = []
+  const maxVisible = 5
+  if (totalPages <= maxVisible) {
+    for (let i = 1; i <= totalPages; i++) pages.push(i)
+  } else {
+    pages.push(1)
+    if (currentPage > 3) pages.push("ellipsis")
+    const start = Math.max(2, currentPage - 1)
+    const end = Math.min(totalPages - 1, currentPage + 1)
+    for (let i = start; i <= end; i++) {
+      if (!pages.includes(i)) pages.push(i)
+    }
+    if (currentPage < totalPages - 2) pages.push("ellipsis")
+    if (!pages.includes(totalPages)) pages.push(totalPages)
+  }
+  return pages
+}
+
+const pages = getPageNumbers()
+---
+<nav class={classes.root} data-slot="pagination-root" aria-label="pagination" {...rest}>
+  <ul class={classes.list} data-slot="list">
+    <li class={classes.item}>
+      <a
+        href={currentPage > 1 ? `${baseUrl}${currentPage - 1}` : undefined}
+        class={classes.link}
+        aria-label="Go to previous page"
+        aria-disabled={currentPage === 1}
+        style={currentPage === 1 ? "pointer-events: none; opacity: 0.5;" : ""}
+      >
+        <span class="i-lucide-chevron-left size-4" aria-hidden="true" />
+      </a>
+    </li>
+
+    {pages.map((p) => {
+      if (p === "ellipsis") {
+        return (
+          <li class={classes.item}>
+            <span class={classes.ellipsis} aria-hidden="true">
+              &hellip;
+            </span>
+          </li>
+        )
+      }
+
+      const isActive = p === currentPage
+      const itemClasses = resolveClasses(pagination, { active: isActive }, useUi("pagination", uiProp))
+
+      return (
+        <li class={classes.item}>
+          <a
+            href={`${baseUrl}${p}`}
+            class={itemClasses.link}
+            aria-current={isActive ? "page" : undefined}
+          >
+            {p}
+          </a>
+        </li>
+      )
+    })}
+
+    <li class={classes.item}>
+      <a
+        href={currentPage < totalPages ? `${baseUrl}${currentPage + 1}` : undefined}
+        class={classes.link}
+        aria-label="Go to next page"
+        aria-disabled={currentPage === totalPages}
+        style={currentPage === totalPages ? "pointer-events: none; opacity: 0.5;" : ""}
+      >
+        <span class="i-lucide-chevron-right size-4" aria-hidden="true" />
+      </a>
+    </li>
+  </ul>
+</nav>

package/src/components/astro/RLAPassword.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PasswordProps } from "../../types"
+import passwordThemeDefault from "../../themes/password.theme"
+
+const password = scv(passwordThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PasswordProps
+
+const classes = resolveClasses(password, {}, useUi("password", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAPhoneMockup.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PhoneMockupProps } from "../../types"
+import phoneMockupThemeDefault from "../../themes/phone-mockup.theme"
+
+const phoneMockup = scv(phoneMockupThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PhoneMockupProps
+
+const classes = resolveClasses(phoneMockup, {}, useUi("phoneMockup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAPopover.astro

@@ -0,0 +1,31 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PopoverProps } from "../../types"
+import popoverTheme from "../../themes/popover.theme"
+
+const popover = scv(popoverTheme)
+
+const {
+  triggerLabel,
+  placement = "bottom",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PopoverProps
+
+const classes = resolveClasses(popover, {
+  placement
+}, useUi("popover", uiProp), className)
+---
+<div class={classes.root} data-slot="popover-container" {...rest}>
+  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+    <slot name="trigger">
+      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
+    </slot>
+  </div>
+
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAPost.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PostProps } from "../../types"
+import postThemeDefault from "../../themes/post.theme"
+
+const post = scv(postThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PostProps
+
+const classes = resolveClasses(post, {}, useUi("post", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAPricingPlan.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PricingPlanProps } from "../../types"
+import pricingPlanThemeDefault from "../../themes/pricing-plan.theme"
+
+const pricingPlan = scv(pricingPlanThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PricingPlanProps
+
+const classes = resolveClasses(pricingPlan, {}, useUi("pricingPlan", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAPricingTable.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PricingTableProps } from "../../types"
+import pricingTableThemeDefault from "../../themes/pricing-table.theme"
+
+const pricingTable = scv(pricingTableThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PricingTableProps
+
+const classes = resolveClasses(pricingTable, {}, useUi("pricingTable", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAProgress.astro

@@ -0,0 +1,45 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ProgressProps } from "../../types"
+import progressThemeDefault, { createProgressTheme } from "../../themes/progress.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const progressTheme = uiConfig.colors ? createProgressTheme(uiConfig.colors) : progressThemeDefault
+const progress = scv(progressTheme)
+
+const {
+  value = 0,
+  max = 100,
+  color = "primary",
+  size = "md",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ProgressProps
+
+const classes = resolveClasses(progress, {
+  color,
+  size,
+  theme
+}, useUi("progress", uiProp), className)
+
+const percentage = Math.min(100, Math.max(0, (value / max) * 100))
+---
+<div
+  class={classes.root}
+  data-slot="progress-root"
+  role="progressbar"
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  {...rest}
+>
+  <div
+    class={classes.indicator}
+    data-slot="indicator"
+    style={{ transform: `translateX(-${100 - percentage}%)` }}
+  />
+</div>

package/src/components/astro/RLAProse.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ProseProps } from "../../types"
+import proseThemeDefault from "../../themes/prose.theme"
+
+const prose = scv(proseThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ProseProps
+
+const classes = resolveClasses(prose, {}, useUi("prose", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAQrCode.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { QrCodeProps } from "../../types"
+import qrCodeThemeDefault from "../../themes/qr-code.theme"
+
+const qrCode = scv(qrCodeThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as QrCodeProps
+
+const classes = resolveClasses(qrCode, {}, useUi("qrCode", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLARadioGroup.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { RadioGroupProps } from "../../types"
+import radioGroupThemeDefault from "../../themes/radio-group.theme"
+
+const radioGroup = scv(radioGroupThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RadioGroupProps
+
+const classes = resolveClasses(radioGroup, {}, useUi("radioGroup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLARating.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { RatingProps } from "../../types"
+import ratingThemeDefault from "../../themes/rating.theme"
+
+const rating = scv(ratingThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RatingProps
+
+const classes = resolveClasses(rating, {}, useUi("rating", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>