@rimelight/ui 0.0.36 → 0.0.38

package/src/components/astro/RLABanner.astro

@@ -1,138 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { BannerProps } from "../../types"
-import bannerThemeDefault, { createBannerTheme } from "../../themes/banner.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const bannerTheme = uiConfig.colors ? createBannerTheme() : bannerThemeDefault
-
-const banner = scv(bannerTheme)
-
-const {
-  contain = true,
-  sticky = false,
-  fixed = true,
-  stackIndex = 0,
-  hideOnScroll = true,
-  dismissable = false,
-  dismissId,
-  actions = [],
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BannerProps
-
-const classes = resolveClasses(banner, {
-  contain,
-  sticky: fixed ? false : sticky,
-  fixed,
-}, useUi("banner", uiProp), className);
-
-const bannerId = `rla-banner-${Math.random().toString(36).slice(2, 8)}`;
-const storageKey = dismissId || bannerId;
-const zIndex = 200 - stackIndex;
----
-
-<div
-  id={bannerId}
-  data-slot="root"
-  class:list={[classes.root]}
-  data-rla-banner="true"
-  data-stack-index={stackIndex}
-  data-hide-on-scroll={String(hideOnScroll)}
-  data-header-layer-id={bannerId}
-  data-layer-type="banner"
-  data-dismiss-key={`rl-banner-dismiss-${storageKey}`}
-  {...rest}
->
-  <div class:list={[classes.content]} data-header-content>
-    <div class:list={[classes.container]}>
-      <div class:list={[classes.left, "actions-open-hidden"]} data-slot="left">
-        <slot name="left" />
-      </div>
-      <div class:list={[classes.center, "actions-open-hidden"]} data-slot="center">
-        <slot name="center">
-          <slot />
-        </slot>
-      </div>
-
-      {actions.length > 0 && (
-        <input
-          type="checkbox"
-          id={`${bannerId}-act`}
-          class="peer sr-only shrink-0"
-        />
-      )}
-
-      <div class="flex-1"></div>
-
-      <div class:list={[classes.side]}>
-        <slot name="right" />
-      </div>
-
-      {actions.length > 0 && (
-        <label
-          for={`${bannerId}-act`}
-          class="flex-none flex items-center justify-center size-7 rounded-md hover:bg-black/10 dark:hover:bg-white/10 cursor-pointer md:hidden text-sm leading-none peer-checked:order-first"
-          aria-label="Show actions"
-        >···</label>
-      )}
-
-      {actions.length > 0 && (
-        <div
-          class:list={[
-            classes.actions,
-            "hidden peer-checked:flex md:flex flex-row items-center justify-center gap-2 peer-checked:order-first"
-          ]}
-        >
-          {actions.map((action) => (
-            <a
-              href={action.href || "#"}
-              class:list={[
-                "inline-flex items-center justify-center gap-1 px-3 py-1 rounded-md text-xs font-semibold transition-colors no-underline cursor-pointer shrink-0",
-                action.variant === "solid" || !action.variant
-                  ? "bg-foreground text-background hover:opacity-90"
-                  : "bg-white/20 text-white hover:bg-white/30",
-                action.class
-              ]}
-              data-banner-action
-            >
-              {action.label}
-            </a>
-          ))}
-        </div>
-      )}
-
-      {dismissable && (
-        <button
-          class:list={[classes.dismiss]}
-          data-banner-close
-          aria-label="Close banner"
-          type="button"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
-        </button>
-      )}
-    </div>
-  </div>
-</div>
-
-<style is:inline set:html={`
-  ${actions.length > 0 ? `#${bannerId}:has(#${bannerId}-act:checked) .actions-open-hidden { display: none !important; }` : ''}
-  ${fixed ? `#${bannerId} { z-index: ${zIndex} !important; }` : ''}
-`} />

package/src/components/astro/RLABreadcrumb.astro

@@ -1,61 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { BreadcrumbProps } from "../../types"
-import breadcrumbThemeDefault, { createBreadcrumbTheme } from "../../themes/breadcrumb.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const breadcrumbTheme = uiConfig.colors ? createBreadcrumbTheme() : breadcrumbThemeDefault
-
-const breadcrumb = scv(breadcrumbTheme)
-
-const {
-  items,
-  separatorIcon = "i-lucide-chevron-right",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BreadcrumbProps
-
-const classes = resolveClasses(breadcrumb, {}, useUi("breadcrumb", uiProp), className)
----
-<nav class={classes.root} data-slot="breadcrumb-root" {...rest}>
-  <ol class={classes.list} data-slot="list">
-    {items ? (
-      items.map((item, idx) => (
-        <li class={classes.item} data-slot="item">
-          {item.href ? (
-            <a href={item.href} class={classes.link} data-slot="link">
-              {item.label}
-            </a>
-          ) : (
-            <span class={classes.page} data-slot="page">
-              {item.label}
-            </span>
-          )}
-          {idx < items.length - 1 && (
-            <span class={classes.separator} data-slot="separator" aria-hidden="true">
-              <span class={separatorIcon} />
-            </span>
-          )}
-        </li>
-      ))
-    ) : (
-      <slot />
-    )}
-  </ol>
-</nav>
-
-{items && (
-  <script type="application/ld+json" is:inline set:html={JSON.stringify({
-    "@context": "https://schema.org",
-    "@type": "BreadcrumbList",
-    "itemListElement": items.map((item, idx) => ({
-      "@type": "ListItem",
-      "position": idx + 1,
-      "name": item.label,
-      "item": item.href ? new URL(item.href, Astro.site || "https://starter.rimelight.com").toString() : undefined
-    }))
-  })} />
-)}

package/src/components/astro/RLABrowserMockup.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { BrowserMockupProps } from "../../types"
-import browserMockupThemeDefault, { createBrowserMockupTheme } from "../../themes/browser-mockup.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const browserMockupTheme = uiConfig.colors ? createBrowserMockupTheme() : browserMockupThemeDefault
-
-const browserMockup = scv(browserMockupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BrowserMockupProps
-
-const classes = resolveClasses(browserMockup, {}, useUi("browserMockup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAButton.astro

@@ -1,145 +0,0 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ButtonProps } from "../../types"
-import buttonThemeDefault, { createButtonTheme } from "../../themes/button.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import RLAAvatar from "./RLAAvatar.astro"
-
-const uiConfig = getUIConfig()
-const buttonTheme = uiConfig.colors ? createButtonTheme(uiConfig.colors) : buttonThemeDefault
-
-const button = scv(buttonTheme)
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  href,
-  label,
-  leadingIcon,
-  trailingIcon,
-  avatar,
-  loading = false,
-  loadingAuto = false,
-  square = false,
-  rounded = false,
-  block = false,
-  active = false,
-  theme,
-  activeColor,
-  activeVariant,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ButtonProps & {
-  rounded?: boolean
-  activeColor?: string
-  activeVariant?: string
-}
-
-const isLeading = !!(leadingIcon || avatar || Astro.slots.has("leading")) || loading
-const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
-
-const showLeadingIcon = loading
-  ? "i-lucide-loader-circle"
-  : leadingIcon
-
-const showTrailingIcon = loading
-  ? "i-lucide-loader-circle"
-  : trailingIcon
-
-const leadingIconClass = loading ? "animate-spin" : ""
-const trailingIconClass = loading ? "animate-spin" : ""
-
-const classes = resolveClasses(button, {
-  variant: (active && activeVariant ? activeVariant : variant) as "solid",
-  color: (active && activeColor ? activeColor : color) as "neutral",
-  size,
-  block,
-  square: square || (!label && !Astro.slots.has("default")),
-  rounded,
-  leading: isLeading,
-  trailing: isTrailing,
-  loading,
-  active,
-  theme
-}, useUi("button", uiProp), className);
-
-const Tag = href ? "a" : "button";
-
-const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
----
-<Tag
-  class={classes.root}
-  data-slot="root"
-  {...(Tag === "a" ? { href } : {})}
-  {...loadingAutoProps}
-  {...rest}
->
-  <slot name="leading" {...{ ui: classes }}>
-    {isLeading && (
-      <span class={classes.leadingIcon} data-slot="leading-icon">
-        {loading || leadingIcon ? (
-           <span class={cx(showLeadingIcon, leadingIconClass)} aria-hidden="true" />
-        ) : avatar ? (
-           <RLAAvatar
-              {...(typeof avatar === 'string' ? { src: avatar } : avatar)}
-              size={classes.leadingAvatarSize as any}
-              class={classes.leadingAvatar}
-              data-slot="leading-avatar"
-           />
-        ) : null}
-      </span>
-    )}
-  </slot>
-
-  {label !== undefined && label !== null && (
-    <span class={classes.label} data-slot="label">
-      {label}
-    </span>
-  )}
-  {!label && <slot />}
-
-  <slot name="trailing" {...{ ui: classes }}>
-    {isTrailing && (
-      <span class={classes.trailingIcon} data-slot="trailing-icon">
-        <span class={cx(showTrailingIcon, trailingIconClass)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-</Tag>
-
-{loadingAuto && (
-  <script>
-    document.querySelectorAll('button[data-loading-auto]').forEach((button) => {
-      button.addEventListener('click', async (_event) => {
-        // Find if there are any other click listeners that return a promise
-        // This is tricky in vanilla JS, but we can assume if it's data-loading-auto,
-        // the user wants us to track the click.
-        // If the button is already loading, don't do anything
-        if (button.getAttribute('data-loading') === 'true') return;
-
-        // We can't easily intercept other listeners, but if this is an Astro component,
-        // the onClick might be passed via ...rest as a string or handled via a separate script.
-
-        // A better way: if data-loading-auto is present, we wrap the click.
-        // But we need to know what to wait for.
-
-        // In Rimelight UI, we handle this via native DOM events.
-        // In Astro, if the user adds an event listener in their own script, we don't know.
-
-        // If they use standard onClick attribute:
-        const onClick = button.getAttribute('onclick');
-        if (onClick) {
-           button.setAttribute('data-loading', 'true');
-           button.classList.add('is-loading'); // We might need to ensure the CSS handles this
-           // Actually, the styles are driven by the classes generated by scv.
-           // Changing those classes dynamically is hard without knowing the full list.
-
-           // However, if we just want PARITY in the API, we can at least provide the hook.
-        }
-      });
-    });
-  </script>
-)}

package/src/components/astro/RLACalendar.astro

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

package/src/components/astro/RLACallout.astro

@@ -1,112 +0,0 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CalloutProps } from "../../types"
-import calloutThemeDefault, { createCalloutTheme } from "../../themes/callout.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-import RLAAvatar from "./RLAAvatar.astro"
-
-const uiConfig = getUIConfig()
-const calloutTheme = uiConfig.colors ? createCalloutTheme(uiConfig.colors) : calloutThemeDefault
-const callout = scv(calloutTheme)
-
-const {
-  variant = "solid",
-  color = "primary",
-  title,
-  description,
-  icon,
-  avatar,
-  actions,
-  close,
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CalloutProps
-
-const colorToIcon: Record<string, string | undefined> = {
-  error: "i-lucide-circle-x",
-  warning: "i-lucide-triangle-alert",
-  info: "i-lucide-info",
-  success: "i-lucide-circle-check",
-  primary: undefined,
-  secondary: undefined,
-  commentary: undefined,
-  ideation: undefined,
-  source: undefined,
-  neutral: undefined
-}
-
-const resolvedColor = (variant === "destructive") ? "error" : color
-const resolvedVariant = (variant === "solid" || variant === "outline" || variant === "soft" || variant === "subtle") ? variant : "solid"
-const resolvedIcon = icon ?? colorToIcon[resolvedColor]
-const hasTitleRow = !!(title || Astro.slots.has("title") || Astro.slots.has("header") || avatar || close || Astro.slots.has("close"))
-
-const classes = resolveClasses(callout, {
-  variant: resolvedVariant,
-  color: resolvedColor as any,
-  theme
-}, useUi("callout", uiProp), className)
----
-<div
-  class={classes.root}
-  data-slot="root"
-  role="alert"
-  {...rest}
->
-  <slot name="icon">
-    {resolvedIcon && (
-      <span class={classes.icon} data-slot="icon">
-        <span class={cx(resolvedIcon)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-
-  <div class={classes.body} data-slot="body">
-    {hasTitleRow && (
-      <div class="flex items-center gap-2.5">
-        <slot name="avatar" {...{ ui: classes }}>
-          {avatar && (
-            <RLAAvatar
-              {...(typeof avatar === 'string' ? { src: avatar } : avatar)}
-              size={classes.avatarSize as any}
-              class={classes.avatar}
-              data-slot="avatar"
-            />
-          )}
-        </slot>
-
-        {(title || Astro.slots.has("title")) && (
-          <h5 class={classes.title} data-slot="title">
-            {title}
-            <slot name="title" />
-          </h5>
-        )}
-
-        <slot name="header" />
-
-        <slot name="close">
-          {close && (
-            <button class={classes.close} data-slot="close">
-              <span class="i-lucide-x size-4" />
-            </button>
-          )}
-        </slot>
-      </div>
-    )}
-
-    {(description || Astro.slots.has("default")) && (
-      <div class={classes.content} data-slot="content">
-        {description}
-        <slot />
-      </div>
-    )}
-
-    {(actions || Astro.slots.has("actions")) && (
-      <div class={classes.actions} data-slot="actions">
-        <slot name="actions" />
-      </div>
-    )}
-  </div>
-</div>

package/src/components/astro/RLACard.astro

@@ -1,79 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CardProps } from "../../types"
-import cardThemeDefault, { createCardTheme } from "../../themes/card.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const cardTheme = uiConfig.colors ? createCardTheme() : cardThemeDefault
-
-const card = scv(cardTheme)
-
-const {
-  title,
-  description,
-  mediaSrc,
-  href,
-  overlay = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CardProps
-
-const classes = resolveClasses(card, {
-  interactive: !!href,
-  overlay
-}, useUi("card", uiProp), className)
-
-const Tag = href ? "a" : "div"
----
-<Tag
-  class={classes.root}
-  data-slot="card-root"
-  {...(Tag === "a" ? { href } : {})}
-  {...(Tag === "a" ? { style: "text-decoration: none" } : {})}
-  {...rest}
->
-  <slot name="media">
-    {mediaSrc && (
-      <div class={classes.media} data-slot="media">
-        <img src={mediaSrc} alt={title || ""} class="h-full w-full object-cover" />
-      </div>
-    )}
-  </slot>
-
-  {overlay ? (
-    <div class={classes.overlay} data-slot="overlay">
-      {title && <div class={classes.title} data-slot="title">{title}</div>}
-      {description && <div class={classes.description} data-slot="description">{description}</div>}
-      <slot />
-    </div>
-  ) : (
-    <>
-      <slot name="header">
-        {(title || description || Astro.slots.has("title") || Astro.slots.has("description")) && (
-          <div class={classes.header} data-slot="header">
-            {title && <div class={classes.title} data-slot="title">{title}</div>}
-            <slot name="title" />
-            
-            {description && <div class={classes.description} data-slot="description">{description}</div>}
-            <slot name="description" />
-          </div>
-        )}
-      </slot>
-
-      {Astro.slots.has("default") && (
-        <div class={classes.body} data-slot="body">
-          <slot />
-        </div>
-      )}
-
-      {Astro.slots.has("footer") && (
-        <div class={classes.footer} data-slot="footer">
-          <slot name="footer" />
-        </div>
-      )}
-    </>
-  )}
-</Tag>

package/src/components/astro/RLACarousel.astro

@@ -1,104 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CarouselProps } from "../../types"
-import carouselThemeDefault, { createCarouselTheme } from "../../themes/carousel.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const carouselTheme = uiConfig.colors ? createCarouselTheme() : carouselThemeDefault
-
-const carousel = scv(carouselTheme)
-
-const {
-  slides,
-  autoplay = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CarouselProps
-
-const classes = resolveClasses(carousel, {}, useUi("carousel", uiProp), className)
-const carouselId = `rla-carousel-${Math.random().toString(36).substring(2, 9)}`
----
-<rla-carousel data-autoplay={autoplay ? "true" : "false"} {...rest}>
-  <div id={carouselId} class={classes.root} data-slot="carousel-root">
-    <div class={classes.viewport} data-slot="viewport">
-      <div class={classes.container} data-slot="container">
-        {slides ? (
-          slides.map((slide) => (
-            <div class={classes.slide} data-slot="slide">
-              {slide.imageSrc && <img src={slide.imageSrc} alt={slide.title || ""} class="w-full aspect-video object-cover rounded-lg" />}
-              {(slide.title || slide.description) && (
-                <div class="absolute bottom-4 left-4 right-4 p-4 rounded-lg bg-black/60 backdrop-blur-sm text-white">
-                  {slide.title && <h4 class="text-sm font-semibold">{slide.title}</h4>}
-                  {slide.description && <p class="text-xs opacity-95 mt-1">{slide.description}</p>}
-                </div>
-              )}
-            </div>
-          ))
-        ) : (
-          <slot />
-        )}
-      </div>
-    </div>
-
-    <button class={classes.buttonPrev} data-slot="prev-button" type="button" aria-label="Previous slide">
-      <span class="i-lucide-chevron-left size-5" aria-hidden="true" />
-    </button>
-    <button class={classes.buttonNext} data-slot="next-button" type="button" aria-label="Next slide">
-      <span class="i-lucide-chevron-right size-5" aria-hidden="true" />
-    </button>
-  </div>
-</rla-carousel>
-
-<script>
-  import EmblaCarousel from "embla-carousel"
-
-  class RLACarousel extends HTMLElement {
-    private emblaCleanup: (() => void) | null = null;
-
-    connectedCallback() {
-      this.style.display = 'contents';
-      const autoplay = this.getAttribute("data-autoplay") === "true";
-      const viewport = this.querySelector('[data-slot="viewport"]') as HTMLElement;
-      const prevBtn = this.querySelector('[data-slot="prev-button"]') as HTMLButtonElement;
-      const nextBtn = this.querySelector('[data-slot="next-button"]') as HTMLButtonElement;
-
-      if (!viewport) return;
-
-      const embla = EmblaCarousel(viewport, { loop: true });
-
-      const onPrevClick = () => embla.scrollPrev();
-      const onNextClick = () => embla.scrollNext();
-
-      if (prevBtn) prevBtn.addEventListener("click", onPrevClick);
-      if (nextBtn) nextBtn.addEventListener("click", onNextClick);
-
-      let intervalId: any = null;
-      if (autoplay) {
-        intervalId = setInterval(() => {
-          embla.scrollNext();
-        }, 4000);
-      }
-
-      this.emblaCleanup = () => {
-        if (prevBtn) prevBtn.removeEventListener("click", onPrevClick);
-        if (nextBtn) nextBtn.removeEventListener("click", onNextClick);
-        if (intervalId) clearInterval(intervalId);
-        embla.destroy();
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.emblaCleanup) {
-        this.emblaCleanup();
-        this.emblaCleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-carousel')) {
-    customElements.define('rla-carousel', RLACarousel);
-  }
-</script>