@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLAPageSection.astro

@@ -1,157 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-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 uiConfig = getUIConfig()
-const pageSectionTheme = uiConfig.colors ? createPageSectionTheme() : pageSectionThemeDefault
-
-const pageSection = scv(pageSectionTheme)
-
-const {
-  as = "section",
-  variant = "default",
-  orientation = "vertical",
-  reverse = false,
-  ctaVariant = "solid",
-  headline,
-  title,
-  description,
-  icon,
-  links,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PageSectionProps;
-
-const resolvedVariant = (variant === "default" || variant === "hero" || variant === "cta") ? variant : "default"
-
-const classes = resolveClasses(pageSection, {
-  variant: resolvedVariant,
-  orientation,
-  reverse,
-  ...(resolvedVariant === "cta" && { ctaVariant }),
-  headline: !!(Astro.slots.has("headline") || headline),
-  title: !!(Astro.slots.has("title") || title),
-  description: !!(Astro.slots.has("description") || description),
-  body: Astro.slots.has("body")
-}, useUi("pageSection", uiProp), className);
-
-const hasDefaultSlot = Astro.slots.has("default");
-
-const Tag = as;
-const TitleTag = variant === "hero" ? "h1" : "h2";
----
-
-<Tag
-  data-orientation={orientation}
-  class:list={[classes.root]}
-  {...rest}
->
-  {Astro.slots.has("background") && (
-    <div class:list={[classes.background]} data-slot="background">
-      <slot name="background" />
-    </div>
-  )}
-
-  <slot name="top" />
-
-  <div
-    class:list={[classes.container]}
-  >
-    {(Astro.slots.has("header") || icon || headline || title || description || Astro.slots.has("body") || Astro.slots.has("footer") || Astro.slots.has("links") || links?.length) && (
-      <div
-        class:list={[classes.wrapper]}
-      >
-        {(Astro.slots.has("header") || icon || headline || title || description) && (
-          <div
-            class:list={[classes.header]}
-          >
-            <slot name="header">
-              {(icon || Astro.slots.has("leading")) && (
-                <div
-                  class:list={[classes.leading]}
-                >
-                  <slot name="leading" {...{ ui: classes }}>
-                    {icon && (
-                      <RLAIcon name={icon} size="md" ui={{ root: classes.leadingIcon }} />
-                    )}
-                  </slot>
-                </div>
-              )}
-
-              {(headline || Astro.slots.has("headline")) && (
-                <div
-                  class:list={[classes.headline]}
-                >
-                  <slot name="headline">
-                    {headline}
-                  </slot>
-                </div>
-              )}
-
-              {(title || Astro.slots.has("title")) && (
-                <TitleTag
-                  class:list={[classes.title]}
-                >
-                  <slot name="title">
-                    {title}
-                  </slot>
-                </TitleTag>
-              )}
-
-              {(description || Astro.slots.has("description")) && (
-                <div
-                  class:list={[classes.description]}
-                >
-                  <slot name="description">
-                    {description}
-                  </slot>
-                </div>
-              )}
-            </slot>
-          </div>
-        )}
-
-        {Astro.slots.has("body") && (
-          <div
-            class:list={[classes.body]}
-          >
-            <slot name="body" />
-          </div>
-        )}
-
-        {(Astro.slots.has("footer") || Astro.slots.has("links") || links?.length) && (
-          <div
-            class:list={[classes.footer]}
-          >
-            <slot name="footer">
-              {(links?.length || Astro.slots.has("links")) && (
-                <div
-                  class:list={[classes.links]}
-                >
-                  {links?.map((link) => (
-                    <RLAButton size="lg" {...link} />
-                  ))}
-                  <slot name="links" />
-                </div>
-              )}
-            </slot>
-          </div>
-        )}
-      </div>
-    )}
-
-    {hasDefaultSlot ? (
-      <slot />
-    ) : orientation === "horizontal" ? (
-      <div class="hidden lg:block" />
-    ) : null}
-  </div>
-
-  <slot name="bottom" />
-</Tag>

package/src/components/astro/RLAPagination.astro

@@ -1,96 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PaginationProps } from "../../types"
-import paginationThemeDefault, { createPaginationTheme } from "../../themes/pagination.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const paginationTheme = uiConfig.colors ? createPaginationTheme() : paginationThemeDefault
-
-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:list={[classes.link, currentPage === 1 && "pointer-events-none opacity-50"]}
-        aria-label="Go to previous page"
-        aria-disabled={currentPage === 1}
-      >
-        <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:list={[classes.link, currentPage === totalPages && "pointer-events-none opacity-50"]}
-        aria-label="Go to next page"
-        aria-disabled={currentPage === totalPages}
-      >
-        <span class="i-lucide-chevron-right size-4" aria-hidden="true" />
-      </a>
-    </li>
-  </ul>
-</nav>

package/src/components/astro/RLAPassword.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PasswordProps } from "../../types"
-import passwordThemeDefault, { createPasswordTheme } from "../../themes/password.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const passwordTheme = uiConfig.colors ? createPasswordTheme() : passwordThemeDefault
-
-const password = scv(passwordTheme)
-
-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

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PhoneMockupProps } from "../../types"
-import phoneMockupThemeDefault, { createPhoneMockupTheme } from "../../themes/phone-mockup.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const phoneMockupTheme = uiConfig.colors ? createPhoneMockupTheme() : phoneMockupThemeDefault
-
-const phoneMockup = scv(phoneMockupTheme)
-
-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/RLAPinInput.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PinInputProps } from "../../types"
-import pinInputThemeDefault, { createPinInputTheme } from "../../themes/pin-input.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const pinInputTheme = uiConfig.colors ? createPinInputTheme() : pinInputThemeDefault
-
-const pinInput = scv(pinInputTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PinInputProps
-
-const classes = resolveClasses(pinInput, {}, useUi("pinInput", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAPlaceholder.astro

@@ -1,45 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PlaceholderProps } from "../../types"
-import placeholderThemeDefault, { createPlaceholderTheme } from "../../themes/placeholder.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const placeholderTheme = uiConfig.colors ? createPlaceholderTheme() : placeholderThemeDefault
-
-const placeholder = scv(placeholderTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PlaceholderProps
-
-const classes = resolveClasses(placeholder, {}, useUi("placeholder", uiProp), className)
----
-
-<div class={classes.base} {...rest}>
-  <svg class={classes.svg}>
-    <defs>
-      <pattern
-        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
-        x="0"
-        y="0"
-        width="10"
-        height="10"
-        patternUnits="userSpaceOnUse"
-      >
-        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
-      </pattern>
-    </defs>
-    <rect
-      stroke="none"
-      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
-      width="100%"
-      height="100%"
-    />
-  </svg>
-
-  <slot />
-</div>

package/src/components/astro/RLAPopover.astro

@@ -1,130 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PopoverProps } from "../../types"
-import popoverThemeDefault, { createPopoverTheme } from "../../themes/popover.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const popoverTheme = uiConfig.colors ? createPopoverTheme() : popoverThemeDefault
-
-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" data-placement={placement} {...rest}>
-  <div class={`${classes.trigger} popover-trigger`} data-slot="trigger">
-    <slot name="trigger">
-      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
-    </slot>
-  </div>
-
-  <div class={`${classes.content} popover-content hidden`} data-slot="content">
-    <slot />
-  </div>
-</div>
-
-<script>
-  function initPopovers() {
-    document.querySelectorAll('[data-slot="popover-container"]').forEach(container => {
-      const el = container as any;
-      if (el.dataset && el.dataset.popoverInitialized) return;
-      if (el.dataset) el.dataset.popoverInitialized = "true";
-
-      const trigger = container.querySelector('.popover-trigger');
-      const content = container.querySelector('.popover-content') as HTMLElement;
-
-      if (!trigger || !content) return;
-
-      trigger.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const isOpen = !content.classList.contains('hidden');
-        
-        document.querySelectorAll('.popover-content').forEach(otherContent => {
-          const other = otherContent as HTMLElement;
-          if (other !== content && !other.classList.contains('hidden')) {
-            other.classList.add('hidden');
-            other.style.left = '';
-            other.style.right = '';
-            other.style.transform = '';
-            other.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
-          }
-        });
-
-        if (isOpen) {
-          content.classList.add('hidden');
-          content.style.left = '';
-          content.style.right = '';
-          content.style.transform = '';
-          content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
-        } else {
-          content.classList.remove('hidden');
-
-          // Reset styles to measure original computed bounds
-          content.style.left = '';
-          content.style.right = '';
-          content.style.transform = '';
-
-          const rect = content.getBoundingClientRect();
-          const viewportWidth = window.innerWidth;
-          const placement = container.getAttribute('data-placement') || 'bottom';
-          
-          let shift = 0;
-          const safetyMargin = 24;
-          if (rect.right > viewportWidth - safetyMargin) {
-            shift = (viewportWidth - safetyMargin) - rect.right;
-          } else if (rect.left < safetyMargin) {
-            shift = safetyMargin - rect.left;
-          }
-
-          if (shift !== 0) {
-            const isCentered = (placement === 'top' || placement === 'bottom') && 
-                               !content.classList.contains('right-0') && 
-                               !content.classList.contains('left-0');
-            if (isCentered) {
-              content.style.transform = `translateX(calc(-50% + ${shift}px))`;
-            } else {
-              content.style.transform = `translateX(${shift}px)`;
-            }
-          }
-
-          content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: true } }));
-        }
-      });
-
-      content.addEventListener('click', (e) => {
-        e.stopPropagation();
-      });
-    });
-  }
-
-  const win = window as any;
-  if (!win.hasGlobalPopoverListener) {
-    win.hasGlobalPopoverListener = true;
-    document.addEventListener('click', () => {
-      document.querySelectorAll('.popover-content').forEach(content => {
-        const c = content as HTMLElement;
-        if (!c.classList.contains('hidden')) {
-          c.classList.add('hidden');
-          c.style.left = '';
-          c.style.right = '';
-          c.style.transform = '';
-          c.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
-        }
-      });
-    });
-  }
-
-  document.addEventListener('astro:page-load', initPopovers);
-  initPopovers();
-</script>

package/src/components/astro/RLAPost.astro

@@ -1,74 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PostProps } from "../../types"
-import postThemeDefault, { createPostTheme } from "../../themes/post.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import type { ImageMetadata } from "astro"
-import Image from "astro/components/Image.astro"
-import RLABadge from "./RLABadge.astro"
-
-const uiConfig = getUIConfig()
-const postTheme = uiConfig.colors ? createPostTheme() : postThemeDefault
-
-const post = scv(postTheme)
-
-const {
-  title,
-  description,
-  date,
-  image,
-  to,
-  badge,
-  badgeColor = "primary",
-  variant = "soft",
-  orientation = "vertical",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PostProps
-
-const classes = resolveClasses(post, { variant, orientation }, useUi("post", uiProp), className);
-
-const Tag = to ? "a" : "div";
-const formattedDate = date ? (date instanceof Date ? date.toLocaleDateString() : date) : null;
----
-<Tag class={classes.root} data-slot="root" {...(to ? { href: to } : {})} {...rest}>
-  <slot name="image" {...{ ui: classes }}>
-    {image && (
-      <div class={classes.imageWrapper} data-slot="image-wrapper">
-        {typeof image === 'string' ? (
-           <img src={image} alt={title} class={classes.image} data-slot="image" />
-        ) : (
-           <Image src={image as ImageMetadata} alt={title || ""} class={classes.image} data-slot="image" />
-        )}
-      </div>
-    )}
-  </slot>
-
-  <div class={classes.content} data-slot="content">
-    <slot name="title" {...{ ui: classes }}>
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-    </slot>
-
-    <slot name="description" {...{ ui: classes }}>
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-    </slot>
-
-    <slot name="badge" {...{ ui: classes }}>
-      {badge && <RLABadge color={badgeColor as any} size="sm" shape="pill" class={classes.badge} data-slot="badge">{badge}</RLABadge>}
-    </slot>
-
-    <slot name="date" {...{ ui: classes }}>
-      {formattedDate && <time class={classes.date} data-slot="date">{formattedDate}</time>}
-    </slot>
-
-    <slot />
-  </div>
-
-  {Astro.slots.has("footer") && (
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer" {...{ ui: classes }} />
-    </div>
-  )}
-</Tag>

package/src/components/astro/RLAPricingPlan.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PricingPlanProps } from "../../types"
-import pricingPlanThemeDefault, { createPricingPlanTheme } from "../../themes/pricing-plan.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const pricingPlanTheme = uiConfig.colors ? createPricingPlanTheme() : pricingPlanThemeDefault
-
-const pricingPlan = scv(pricingPlanTheme)
-
-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

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PricingTableProps } from "../../types"
-import pricingTableThemeDefault, { createPricingTableTheme } from "../../themes/pricing-table.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const pricingTableTheme = uiConfig.colors ? createPricingTableTheme() : pricingTableThemeDefault
-
-const pricingTable = scv(pricingTableTheme)
-
-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

@@ -1,51 +0,0 @@
----
-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))
-const id = `progress-${Math.random().toString(36).substring(2, 9)}`
----
-<div
-  class={classes.root}
-  data-slot="progress-root"
-  role="progressbar"
-  aria-valuemin={0}
-  aria-valuemax={max}
-  aria-valuenow={value}
-  {...rest}
->
-  <div
-    class:list={[classes.indicator, id]}
-    data-slot="indicator"
-  />
-</div>
-
-<style is:inline set:html={`
-  .${id} {
-    transform: translateX(-${100 - percentage}%) !important;
-  }
-`} />