@rimelight/ui 0.0.30 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [

package/src/components/astro/RLA3dHover.astro

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

package/src/components/astro/RLAAlert.astro

@@ -0,0 +1,62 @@
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AlertProps } from "../../types"
+import alertThemeDefault, { createAlertTheme } from "../../themes/alert.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const alertTheme = uiConfig.colors ? createAlertTheme(uiConfig.colors) : alertThemeDefault
+const alert = scv(alertTheme)
+
+const {
+  variant = "default",
+  color = "primary",
+  title,
+  description,
+  icon,
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AlertProps
+
+const isIcon = !!(icon || Astro.slots.has("icon"))
+
+const classes = resolveClasses(alert, {
+  variant,
+  color,
+  hasIcon: isIcon,
+  theme
+}, useUi("alert", uiProp), className)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role="alert"
+  {...rest}
+>
+  <slot name="icon">
+    {icon && (
+      <span class={classes.icon} data-slot="icon">
+        <span class={cx(icon)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+
+  <div class={classes.content} data-slot="content">
+    {title && (
+      <h5 class={classes.title} data-slot="title">
+        {title}
+      </h5>
+    )}
+    <slot name="title" />
+
+    {description && (
+      <div class={classes.description} data-slot="description">
+        {description}
+      </div>
+    )}
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAApp.astro

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

package/src/components/astro/RLAAspectRatio.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AspectRatioProps } from "../../types"
+import aspectRatioTheme from "../../themes/aspect-ratio.theme"
+
+const aspectRatio = scv(aspectRatioTheme)
+
+const {
+  ratio = 1,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = 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={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAAudio.astro

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

package/src/components/astro/RLAAvatar.astro

@@ -0,0 +1,56 @@
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AvatarProps } from "../../types"
+import avatarThemeDefault from "../../themes/avatar.theme"
+
+const avatar = scv(avatarThemeDefault)
+
+const {
+  src,
+  alt = "",
+  fallback,
+  size = "md",
+  badge = false,
+  badgeColor = "success",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AvatarProps
+
+const classes = resolveClasses(avatar, {
+  size,
+  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>
+      </span>
+    )}
+  </slot>
+
+  <slot name="badge">
+    {badge && (
+      <span
+        class={cx(classes.badge, badgeColor && `bg-${badgeColor}-500`)}
+        data-slot="badge"
+      />
+    )}
+  </slot>
+</span>

package/src/components/astro/RLAAvatarGroup.astro

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

package/src/components/astro/RLABadge.astro

@@ -0,0 +1,33 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BadgeProps } from "../../types"
+import badgeThemeDefault, { createBadgeTheme } from "../../themes/badge.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const badgeTheme = uiConfig.colors ? createBadgeTheme(uiConfig.colors) : badgeThemeDefault
+const badge = scv(badgeTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  shape = "pill",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BadgeProps
+
+const classes = resolveClasses(badge, {
+  variant,
+  color,
+  size,
+  shape,
+  theme
+}, useUi("badge", uiProp), className)
+---
+<span class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</span>

package/src/components/astro/RLABanner.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BannerProps } from "../../types"
+import bannerThemeDefault from "../../themes/banner.theme"
+
+const banner = scv(bannerThemeDefault)
+
+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>

package/src/components/astro/RLABreadcrumb.astro

@@ -0,0 +1,44 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BreadcrumbProps } from "../../types"
+import breadcrumbTheme from "../../themes/breadcrumb.theme"
+
+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>

package/src/components/astro/RLABrowserMockup.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BrowserMockupProps } from "../../types"
+import browserMockupThemeDefault from "../../themes/browser-mockup.theme"
+
+const browserMockup = scv(browserMockupThemeDefault)
+
+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

@@ -22,6 +22,7 @@ const {
   square = false,
   block = false,
   active = false,
+  theme,
   activeColor,
   activeVariant,
   ui: uiProp,
@@ -52,7 +53,8 @@ const classes = resolveClasses(button, {
   leading: isLeading,
   trailing: isTrailing,
   loading,
-  active
+  active,
+  theme
 }, useUi("button", uiProp), className);
 
 const Tag = href ? "a" : "button";

package/src/components/astro/RLACalendar.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CalendarProps } from "../../types"
+import calendarThemeDefault from "../../themes/calendar.theme"
+
+const calendar = scv(calendarThemeDefault)
+
+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/RLACard.astro

@@ -0,0 +1,74 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CardProps } from "../../types"
+import cardTheme from "../../themes/card.theme"
+
+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 } : {})}
+  {...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 && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot />
+    </div>
+  ) : (
+    <>
+      <slot name="header">
+        {(title || description || Astro.slots.has("title") || Astro.slots.has("description")) && (
+          <div class={classes.header} data-slot="header">
+            {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+            <slot name="title" />
+            
+            {description && <p class={classes.description} data-slot="description">{description}</p>}
+            <slot name="description" />
+          </div>
+        )}
+      </slot>
+
+      {Astro.slots.has("default") && (
+        <div class={classes.content} data-slot="content">
+          <slot />
+        </div>
+      )}
+
+      {Astro.slots.has("footer") && (
+        <div class={classes.footer} data-slot="footer">
+          <slot name="footer" />
+        </div>
+      )}
+    </>
+  )}
+</Tag>

package/src/components/astro/RLACarousel.astro

@@ -0,0 +1,71 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { CarouselProps } from "../../types"
+import carouselTheme from "../../themes/carousel.theme"
+
+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)}`
+---
+<div id={carouselId} class={classes.root} data-slot="carousel-root" data-autoplay={autoplay ? "true" : "false"} {...rest}>
+  <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>
+
+<script>
+  import EmblaCarousel from "embla-carousel"
+
+  document.querySelectorAll('[data-slot="carousel-root"]').forEach((carouselEl) => {
+    const viewport = carouselEl.querySelector('[data-slot="viewport"]') as HTMLElement
+    const prevBtn = carouselEl.querySelector('[data-slot="prev-button"]') as HTMLButtonElement
+    const nextBtn = carouselEl.querySelector('[data-slot="next-button"]') as HTMLButtonElement
+
+    if (!viewport) return
+
+    const embla = EmblaCarousel(viewport, { loop: true })
+
+    if (prevBtn) prevBtn.addEventListener("click", () => embla.scrollPrev())
+    if (nextBtn) nextBtn.addEventListener("click", () => embla.scrollNext())
+
+    const autoplay = carouselEl.getAttribute("data-autoplay") === "true"
+    if (autoplay) {
+      setInterval(() => {
+        if (embla) embla.scrollNext()
+      }, 4000)
+    }
+  })
+</script>

package/src/components/astro/RLAChangelog.astro

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