@rimelight/ui 0.0.37 → 0.0.39

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,177 +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"
-import RLALink from "./RLALink.astro"
-
-const uiConfig = getUIConfig()
-const buttonTheme = uiConfig.colors ? createButtonTheme(uiConfig.colors) : buttonThemeDefault
-
-const button = scv(buttonTheme)
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  href,
-  to,
-  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 || to) ? RLALink : "button";
-
-const loadingAutoProps = loadingAuto ? { 'data-loading-auto': '' } : {};
----
-<Tag
-  class={classes.root}
-  data-slot="root"
-  {...(Tag === RLALink ? { href, to, noExternalIcon: true } : {})}
-  {...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) => {
-        if (button.getAttribute('data-loading') === 'true') return;
-
-        // Extract onclick attribute if available
-        const onClickAttr = button.getAttribute('onclick');
-        if (onClickAttr) {
-          // Temporarily disable default onclick execution to run it through our promise tracker
-          event.preventDefault();
-          event.stopImmediatePropagation();
-
-          // Construct a function to await the promise
-          try {
-            button.setAttribute('data-loading', 'true');
-            button.setAttribute('disabled', 'true');
-            
-            // To spin the icon dynamically:
-            let leadingIconSpan = button.querySelector('[data-slot="leading-icon"]');
-            let icon = leadingIconSpan ? leadingIconSpan.querySelector('span') : null;
-            let origClass = '';
-            let isDynamicallyAdded = false;
-
-            if (!leadingIconSpan) {
-              isDynamicallyAdded = true;
-              leadingIconSpan = document.createElement('span');
-              leadingIconSpan.className = 'flex items-center justify-center shrink-0';
-              leadingIconSpan.setAttribute('data-slot', 'leading-icon');
-              icon = document.createElement('span');
-              icon.className = 'i-lucide-loader-circle animate-spin';
-              leadingIconSpan.appendChild(icon);
-              button.insertBefore(leadingIconSpan, button.firstChild);
-            } else if (icon) {
-              origClass = icon.className;
-              icon.className = 'i-lucide-loader-circle animate-spin';
-            }
-
-            // Execute the promise
-            const promiseFn = new Function('event', `
-              const fn = () => { ${onClickAttr} };
-              return fn();
-            `);
-            await promiseFn.call(button, event);
-
-            // Restore state
-            button.removeAttribute('data-loading');
-            button.removeAttribute('disabled');
-            if (isDynamicallyAdded && leadingIconSpan) {
-              leadingIconSpan.remove();
-            } else if (icon) {
-              icon.className = origClass;
-            }
-          } catch (err) {
-            console.error(err);
-            button.removeAttribute('data-loading');
-            button.removeAttribute('disabled');
-          }
-        }
-      });
-    });
-  </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>