@rimelight/ui 0.0.33 → 0.0.35

package/src/components/astro/RLAAspectRatio.astro

@@ -18,9 +18,9 @@ const {
 } = Astro.props as AspectRatioProps
 
 const classes = resolveClasses(aspectRatio, {}, useUi("aspectRatio", uiProp), className)
-const paddingBottom = `${(1 / ratio) * 100}%`
 ---
-<div class={classes.root} data-slot="root" style={{ paddingBottom }} {...rest}>
+<div class:list={[classes.root]} data-slot="root" {...rest}>
+  <svg viewBox={`0 0 100 ${(1 / ratio) * 100}`} class="w-full h-auto pointer-events-none block" aria-hidden="true"></svg>
   <div class={classes.content} data-slot="content">
     <slot />
   </div>

package/src/components/astro/RLAAvatar.astro

@@ -1,68 +1,135 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AvatarProps } from "../../types"
-import avatarThemeDefault, { createAvatarTheme } from "../../themes/avatar.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const avatarTheme = uiConfig.colors ? createAvatarTheme(uiConfig.colors) : avatarThemeDefault
-
-const avatar = scv(avatarTheme)
-
-const {
-  src,
-  alt = "",
-  fallback,
-  size = "md",
-  badge = false,
-  badgeColor = "success",
-  badgePosition = "bottom-right",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AvatarProps
-
-const classes = resolveClasses(avatar, {
-  size,
-  color: Astro.props.color || "neutral",
-  badgePosition,
-  hasBadge: !!badge
-}, useUi("avatar", uiProp), className)
----
-<span
-  class={classes.root}
-  data-slot="root"
-  {...rest}
->
-  <slot>
-    {src ? (
-      <img
-        src={src}
-        alt={alt}
-        class={classes.image}
-        data-slot="image"
-      />
-    ) : (
-      <span class={classes.fallback} data-slot="fallback">
-        <slot name="fallback">
-          {fallback}
-        </slot>
-        {!fallback && !Astro.slots.has("fallback") && (
-          <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
-        )}
-      </span>
-    )}
-  </slot>
-
-  <slot name="badge">
-    {badge && (
-      <span
-        class={cx(classes.badge, badgeColor && (badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
-        data-slot="badge"
-      >
-        {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
-      </span>
-    )}
-  </slot>
-</span>
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AvatarProps } from "../../types"
+import avatarThemeDefault, { createAvatarTheme } from "../../themes/avatar.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const avatarTheme = uiConfig.colors ? createAvatarTheme(uiConfig.colors) : avatarThemeDefault
+
+const avatar = scv(avatarTheme)
+
+const {
+  src,
+  alt = "",
+  fallback,
+  initials,
+  title,
+  subtitle,
+  label,
+  size = "md",
+  badge = false,
+  badgeColor = "success",
+  badgePosition = "bottom-right",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AvatarProps & {
+  badgePosition?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
+  badgeColor?: string
+}
+
+const classes = resolveClasses(avatar, {
+  size,
+  color: (Astro.props.color || "neutral") as "neutral",
+  badgePosition: badgePosition as "bottom-right"
+}, useUi("avatar", uiProp), className)
+
+const avatarFallback = fallback || initials
+const hasTextLayout = !!(title || subtitle)
+---
+{hasTextLayout ? (
+  <div class="flex items-center gap-3" data-slot="profile-wrapper">
+    <span
+      class={classes.root}
+      data-slot="root"
+      aria-label={label || title}
+      role={label || title ? "img" : undefined}
+      {...rest}
+    >
+      <slot>
+        {src ? (
+          <img
+            src={src}
+            alt={alt}
+            class={classes.image}
+            data-slot="image"
+          />
+        ) : (
+          <span class={classes.fallback} data-slot="fallback">
+            <slot name="fallback">
+              {avatarFallback}
+            </slot>
+            {!avatarFallback && !Astro.slots.has("fallback") && (
+              <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
+            )}
+          </span>
+        )}
+      </slot>
+
+      <slot name="badge">
+        {badge && (
+          <span
+            class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
+            data-slot="badge"
+          >
+            {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
+          </span>
+        )}
+      </slot>
+    </span>
+    <div class="flex flex-col leading-tight">
+      {title && (
+        <span class="font-medium text-sm text-[var(--foreground)]" data-slot="title">
+          {title}
+        </span>
+      )}
+      {subtitle && (
+        <span class="text-xs text-[var(--muted-foreground)]" data-slot="subtitle">
+          {subtitle}
+        </span>
+      )}
+    </div>
+  </div>
+) : (
+  <span
+    class={classes.root}
+    data-slot="root"
+    aria-label={label}
+    role={label ? "img" : undefined}
+    {...rest}
+  >
+    <slot>
+      {src ? (
+        <img
+          src={src}
+          alt={alt}
+          class={classes.image}
+          data-slot="image"
+        />
+      ) : (
+        <span class={classes.fallback} data-slot="fallback">
+          <slot name="fallback">
+            {avatarFallback}
+          </slot>
+          {!avatarFallback && !Astro.slots.has("fallback") && (
+            <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
+          )}
+        </span>
+      )}
+    </slot>
+
+    <slot name="badge">
+      {badge && (
+        <span
+          class={cx(classes.badge, badgeColor && (typeof badgeColor === 'string' && badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
+          data-slot="badge"
+        >
+          {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
+        </span>
+      )}
+    </slot>
+  </span>
+)}
+

package/src/components/astro/RLABadge.astro

@@ -21,9 +21,11 @@ const {
   ...rest
 } = Astro.props as BadgeProps & { label?: string }
 
+const resolvedVariant = (variant === "ghost") ? "soft" : ((variant === "solid" || variant === "outline" || variant === "soft" || variant === "subtle") ? variant : "solid")
+
 const classes = resolveClasses(badge, {
-  variant,
-  color,
+  variant: resolvedVariant as "solid",
+  color: color as "neutral",
   size,
   shape,
   theme

package/src/components/astro/RLABanner.astro

@@ -1,23 +1,138 @@
----
-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 {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BannerProps
-
-const classes = resolveClasses(banner, {}, useUi("banner", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+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

@@ -46,3 +46,16 @@ const classes = resolveClasses(breadcrumb, {}, useUi("breadcrumb", uiProp), clas
     )}
   </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
+    }))
+  })} />
+)}