@rimelight/ui 0.0.27 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -48,7 +48,8 @@
     "./middleware": "./src/middleware/index.ts",
     "./middleware/*": "./src/middleware/*",
     "./nuxt": "./src/nuxt.ts",
-    "./nuxt/types": "./src/nuxt-types.ts",
+    "./types": "./src/types/index.ts",
+    "./types/*": "./src/types/*",
     "./presets": "./src/presets/index.ts",
     "./presets/*": "./src/presets/*",
     "./*": "./src/*"
@@ -63,14 +64,14 @@
     "docs:meta": "tsx scripts/extract-meta.ts"
   },
   "dependencies": {
-    "@astrojs/prism": "^4.0.1",
+    "@astrojs/prism": "^4.0.2",
     "@astrojs/vue": "6.0.1",
-    "@iconify-json/lucide": "^1.2.102",
-    "@nuxt/ui": "4.6.1",
-    "@tailwindcss/vite": "^4.2.3",
+    "@iconify-json/lucide": "^1.2.108",
+    "@nuxt/ui": "4.7.1",
+    "@tailwindcss/vite": "^4.3.0",
     "@unocss/astro": "^66.6.8",
     "css-variants": "2.3.5",
-    "defu": "6.1.6",
+    "defu": "6.1.7",
     "embla-carousel": "8.6.0",
     "picomatch": "^4.0.4",
     "tailwindcss": "^4.2.3",
@@ -80,18 +81,18 @@
   },
   "devDependencies": {
     "@astrojs/check": "0.9.8",
-    "@astrojs/ts-plugin": "1.10.7",
+    "@astrojs/ts-plugin": "1.10.8",
     "@e18e/eslint-plugin": "0.3.0",
-    "@types/node": "25.5.2",
+    "@types/node": "25.8.0",
     "@types/picomatch": "^4.0.3",
     "@unocss/eslint-plugin": "66.6.8",
-    "astro": "6.1.8",
+    "astro": "6.3.6",
     "eslint-plugin-regexp": "3.1.0",
-    "knip": "6.12.2",
-    "tsx": "4.21.0",
+    "knip": "6.14.1",
+    "tsx": "4.22.1",
     "typescript": "6.0.3",
     "unocss": "66.6.8",
-    "vite-plus": "0.1.19"
+    "vite-plus": "0.1.21"
   },
   "peerDependencies": {
     "@astrojs/starlight": ">=0.5.0",

package/src/components/astro/RLAAccordion.astro

@@ -1,11 +1,7 @@
 ---
-import type { HTMLAttributes } from 'astro/types';
+import type { AccordionProps } from "../../types";
 
-export type Props = HTMLAttributes<'details'> & {
-    summary: string;
-};
-
-const { summary, class: className, ...attrs } = Astro.props;
+const { summary, class: className, ...attrs } = Astro.props as AccordionProps;
 ---
 
 <details class:list={['group', className]} {...attrs}>

package/src/components/astro/RLAButton.astro

@@ -1,30 +1,14 @@
 ---
 import { scv, cx } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
-import buttonTheme from "../../themes/button.theme"
+import type { ButtonProps } from "../../types"
+import buttonThemeDefault, { createButtonTheme } from "../../themes/button.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
 
-const button = scv(buttonTheme)
-type ButtonVariants = ComponentVariants<typeof buttonTheme>
+const uiConfig = getUIConfig()
+const buttonTheme = uiConfig.colors ? createButtonTheme(uiConfig.colors) : buttonThemeDefault
 
-export interface RLAButtonProps {
-  variant?: ButtonVariants['variant'];
-  color?: ButtonVariants['color'];
-  size?: ButtonVariants['size'];
-  href?: string;
-  label?: string;
-  leadingIcon?: string;
-  trailingIcon?: string;
-  loading?: boolean;
-  square?: boolean;
-  block?: boolean;
-  active?: boolean;
-  activeColor?: ButtonVariants['color'];
-  activeVariant?: ButtonVariants['variant'];
-  ui?: ComponentSlots<typeof buttonTheme>;
-  class?: any;
-  [key: string]: unknown;
-}
+const button = scv(buttonTheme)
 
 const {
   variant = "solid",
@@ -43,7 +27,7 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as RLAButtonProps
+} = Astro.props as ButtonProps
 
 const isLeading = !!(leadingIcon || Astro.slots.has("leading")) || loading
 const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)

package/src/components/astro/RLAEmbedYoutube.astro

@@ -1,16 +1,16 @@
 ---
-const PLACEHOLDER_THUMBNAIL = "/assets/blog-placeholder-1.jpg";
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { EmbedYoutubeProps } from "../../types"
+import embedYoutubeTheme from "../../themes/embedYoutube.theme"
+import { Image } from "astro:assets"
 
+const PLACEHOLDER_THUMBNAIL = "/assets/placeholder.webp";
 const YOUTUBE_EMBED_BASE = "https://www.youtube.com/embed/";
-
 const VALID_ID_PATTERN = /^[\w-]{11}$/;
-
 const KNOWN_PREFIXES = ["www.", "m.", "music.", "gaming."];
-
 const YOUTUBE_THUMB_BASE = "https://i3.ytimg.com/vi/";
-
 const MAXRES_THUMBNAIL = "maxresdefault.jpg";
-
 const DEFAULT_THUMBNAIL = "hqdefault.jpg";
 
 const thumbnailAvailabilityCache = new Map<string, boolean>();
@@ -109,44 +109,54 @@ function getYoutubeEmbedUrl(rawUrl: string): string | null {
   return id ? `${YOUTUBE_EMBED_BASE}${id}?autoplay=1` : null;
 }
 
-interface Props {
-  src: string;
-  title?: string;
-  class?: string;
-}
+const embedYoutube = scv(embedYoutubeTheme)
+
+const {
+  src,
+  title = "YouTube Video Player",
+  icon = "i-lucide-play",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as EmbedYoutubeProps
 
-const { src, title = "YouTube video player", class: className } = Astro.props;
+const classes = resolveClasses(embedYoutube, {
+  title: !!(Astro.slots.has("title") || title),
+  icon: !!(Astro.slots.has("icon") || icon),
+}, useUi("embedYoutube", uiProp), className);
 
 const embedUrl = getYoutubeEmbedUrl(src);
 const thumbnail = await getYoutubeThumbnail(src);
 const isPlayable = Boolean(embedUrl);
-const ariaLabel = isPlayable ? "Play YouTube video" : "YouTube video unavailable";
+const ariaLabel = isPlayable ? "Play YouTube Video" : "YouTube Video Unavailable";
 ---
 
-<div class:list={["relative aspect-video h-full w-full cursor-pointer overflow-hidden", className]} data-youtube-video>
+<div
+    class:list={[classes.root]}
+    {...rest}
+>
   <button
     type="button"
-    class="absolute inset-0 aspect-video h-full w-full overflow-hidden group"
     data-youtube-trigger
     aria-label={ariaLabel}
     data-embed-url={isPlayable ? embedUrl : undefined}
     disabled={!isPlayable}
     data-video-title={title}
+    class:list={[classes.trigger]}
   >
-    <img
+    <Image
+      layout="full-width"
       src={thumbnail}
-      class="h-full w-full object-cover"
       alt={title}
       width="1280"
       height="720"
       loading="lazy"
+      class:list={[classes.image]}
     />
 
-    <span class="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/10 group-hover:bg-black/30 transition-colors">
-      <svg class="h-20 w-20 text-white opacity-85 transition-all transform group-hover:opacity-100 group-hover:scale-110 duration-300" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M8 5v14l11-7z"/>
-      </svg>
-    </span>
+    <slot name="icon">
+      <span class:list={[classes.icon, icon]} aria-hidden="true" />
+    </slot>
   </button>
 </div>
 
@@ -167,7 +177,7 @@ const ariaLabel = isPlayable ? "Play YouTube video" : "YouTube video unavailable
       iframe.src = embedUrl;
       iframe.title = title;
       iframe.allow =
-        "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
+          "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
       iframe.allowFullscreen = true;
       iframe.loading = "lazy";
       iframe.referrerPolicy = "strict-origin-when-cross-origin";
@@ -176,7 +186,6 @@ const ariaLabel = isPlayable ? "Play YouTube video" : "YouTube video unavailable
       root.replaceChildren(iframe);
     };
 
-    // click and accessibility activation
     trigger.addEventListener("click", activate, { once: true });
     trigger.addEventListener("keydown", (event) => {
       if (event.key === "Enter" || event.key === " ") {
@@ -185,4 +194,4 @@ const ariaLabel = isPlayable ? "Play YouTube video" : "YouTube video unavailable
       }
     }, { once: true });
   })();
-</script>
+</script>

package/src/components/astro/RLAFooter.astro

@@ -1,25 +1,17 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { FooterProps } from "../../types"
 import footerTheme from "../../themes/footer.theme"
 
 const footer = scv(footerTheme)
-type FooterVariants = ComponentVariants<typeof footerTheme>
-
-export interface RLAFooterProps {
-  contain?: FooterVariants['contain'];
-  ui?: ComponentSlots<typeof footerTheme>;
-  class?: any;
-  [key: string]: unknown;
-}
 
 const {
   contain = false,
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as RLAFooterProps
+} = Astro.props as FooterProps
 
 const classes = resolveClasses(footer, { contain }, useUi("footer", uiProp), className)
 ---

package/src/components/astro/RLAHeader.astro

@@ -1,22 +1,10 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { HeaderProps } from "../../types"
 import headerTheme from "../../themes/header.theme"
 
 const header = scv(headerTheme)
-type HeaderVariants = ComponentVariants<typeof headerTheme>
-
-export interface RLAHeaderProps {
-  contain?: HeaderVariants['contain'];
-  sticky?: HeaderVariants['sticky'];
-  fixed?: HeaderVariants['fixed'];
-  stackIndex?: number;
-  hideOnScroll?: boolean;
-  ui?: ComponentSlots<typeof headerTheme>;
-  class?: any;
-  [key: string]: unknown;
-}
 
 const {
   contain = true,
@@ -27,7 +15,7 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as RLAHeaderProps;
+} = Astro.props as HeaderProps;
 
 const classes = resolveClasses(header, {
   contain,

package/src/components/astro/RLAIcon.astro

@@ -1,19 +1,10 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { IconProps } from "../../types"
 import iconTheme from "../../themes/icon.theme"
 
 const icon = scv(iconTheme)
-type IconVariants = ComponentVariants<typeof iconTheme>
-
-export interface RLAIconProps {
-  name: string
-  size?: IconVariants['size']
-  ui?: ComponentSlots<typeof iconTheme>
-  class?: any
-  [key: string]: unknown
-}
 
 const {
   name,
@@ -21,7 +12,7 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as RLAIconProps
+} = Astro.props as IconProps
 
 const classes = resolveClasses(icon, { size }, useUi("icon", uiProp), className)
 ---

package/src/components/astro/RLALogo.astro

@@ -1,22 +1,12 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentSlots } from "../../types"
+import type { LogoProps } from "../../types"
 import logoTheme from "../../themes/logo.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
 const logo = scv(logoTheme)
 
-export interface RLALogoProps {
-  variant?: string;
-  mode?: "color" | "white" | "black";
-  href?: string;
-  alt?: string;
-  ui?: ComponentSlots<typeof logoTheme>;
-  class?: any;
-  [key: string]: unknown;
-}
-
 const {
   variant = "logomark",
   mode,
@@ -25,7 +15,7 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as RLALogoProps;
+} = Astro.props as LogoProps;
 
 const classes = resolveClasses(logo, {}, useUi("logo", uiProp), className);
 

package/src/components/astro/RLAPlaceholder.astro

@@ -1,22 +1,16 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentSlots } from "../../types"
+import type { PlaceholderProps } from "../../types"
 import placeholderTheme from "../../themes/placeholder.theme"
 
 const placeholder = scv(placeholderTheme)
 
-export interface RLAPlaceholderProps {
-  ui?: ComponentSlots<typeof placeholderTheme>
-  class?: any
-  [key: string]: unknown
-}
-
 const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as RLAPlaceholderProps
+} = Astro.props as PlaceholderProps
 
 const classes = resolveClasses(placeholder, {}, useUi("placeholder", uiProp), className)
 ---

package/src/components/astro/RLAScrollToTop.astro

@@ -1,22 +1,10 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { ScrollToTopProps } from "../../types"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 
 const scrollToTop = scv(scrollToTopTheme)
-type ScrollToTopVariants = ComponentVariants<typeof scrollToTopTheme>
-
-export interface RLAScrollToTopProps {
-  color?: ScrollToTopVariants['color'];
-  progressWidth?: number;
-  duration?: number;
-  threshold?: number;
-  showProgress?: boolean;
-  ui?: ComponentSlots<typeof scrollToTopTheme>;
-  class?: any;
-  [key: string]: unknown;
-}
 
 const {
   color = "primary",
@@ -27,7 +15,7 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as RLAScrollToTopProps
+} = Astro.props as ScrollToTopProps
 
 const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
 

package/src/components/astro/RLASection.astro

@@ -1,65 +1,12 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { SectionProps } from "../../types"
 import sectionTheme from "../../themes/section.theme"
-import type { RLAIconProps } from "./RLAIcon.astro"
-import type { RLAButtonProps } from "./RLAButton.astro"
 import RLAIcon from "./RLAIcon.astro"
 import RLAButton from "./RLAButton.astro"
 
 const section = scv(sectionTheme)
-type SectionVariants = ComponentVariants<typeof sectionTheme>
-
-export interface RLASectionProps {
-  /**
-   * The element or component this component should render as.
-   * @default 'section'
-   */
-  as?: any;
-  /**
-   * The variant of the section.
-   * @default 'default'
-   */
-  variant?: SectionVariants['variant'];
-  /** The variant of the section when it's a CTA.
-   * @default 'solid'
-   */
-  ctaVariant?: SectionVariants['ctaVariant'];
-  /**
-   * The headline displayed above the title.
-   */
-  headline?: string;
-  /**
-   * The icon displayed above the title.
-   */
-  icon?: RLAIconProps["name"];
-  /**
-   * The section's title, displayed as a <h1> for the hero variant or <h2> otherwise.
-   */
-  title?: string;
-  /**
-   * The section's description, displayed under the title.
-   */
-  description?: string;
-  /**
-   * Display a list of buttons under the description.
-   */
-  links?: RLAButtonProps[]
-  /**
-   * The orientation of the section.
-   * @default 'vertical'
-   */
-  orientation?: SectionVariants['orientation'];
-  /**
-   * Reverse the order of the default slot.
-   * @default false
-   */
-  reverse?: boolean;
-  ui?: ComponentSlots<typeof sectionTheme>;
-  class?: any;
-  [key: string]: unknown;
-}
 
 const {
   as = "section",
@@ -67,19 +14,24 @@ const {
   orientation = "vertical",
   reverse = false,
   ctaVariant = "solid",
+  headline,
+  title,
+  description,
+  icon,
+  links,
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as RLASectionProps;
+} = Astro.props as SectionProps;
 
 const classes = resolveClasses(section, {
   variant,
   orientation,
   reverse,
   ...(variant === "cta" && { ctaVariant }),
-  headline: !!(Astro.slots.has("headline") || Astro.props.headline),
-  title: !!(Astro.slots.has("title") || Astro.props.title),
-  description: !!(Astro.slots.has("description") || Astro.props.description),
+  headline: !!(Astro.slots.has("headline") || headline),
+  title: !!(Astro.slots.has("title") || title),
+  description: !!(Astro.slots.has("description") || description),
   body: Astro.slots.has("body")
 }, useUi("section", uiProp), className);
 
@@ -104,62 +56,55 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
   <slot name="top" />
 
   <div
-    data-slot="container"
     class:list={[classes.container]}
   >
-    {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description || Astro.slots.has("body") || Astro.slots.has("footer") || Astro.slots.has("links") || Astro.props.links?.length) && (
+    {(Astro.slots.has("header") || icon || headline || title || description || Astro.slots.has("body") || Astro.slots.has("footer") || Astro.slots.has("links") || links?.length) && (
       <div
-        data-slot="wrapper"
         class:list={[classes.wrapper]}
       >
-        {(Astro.slots.has("header") || Astro.props.icon || Astro.props.headline || Astro.props.title || Astro.props.description) && (
+        {(Astro.slots.has("header") || icon || headline || title || description) && (
           <div
-            data-slot="header"
             class:list={[classes.header]}
           >
             <slot name="header">
-              {(Astro.props.icon || Astro.slots.has("leading")) && (
+              {(icon || Astro.slots.has("leading")) && (
                 <div
-                  data-slot="leading"
                   class:list={[classes.leading]}
                 >
                   <slot name="leading" {...{ ui: classes }}>
-                    {Astro.props.icon && (
-                      <RLAIcon name={Astro.props.icon} size="md" ui={{ root: classes.leadingIcon }} />
+                    {icon && (
+                      <RLAIcon name={icon} size="md" ui={{ root: classes.leadingIcon }} />
                     )}
                   </slot>
                 </div>
               )}
 
-              {(Astro.props.headline || Astro.slots.has("headline")) && (
+              {(headline || Astro.slots.has("headline")) && (
                 <div
-                  data-slot="headline"
                   class:list={[classes.headline]}
                 >
                   <slot name="headline">
-                    {Astro.props.headline}
+                    {headline}
                   </slot>
                 </div>
               )}
 
-              {(Astro.props.title || Astro.slots.has("title")) && (
+              {(title || Astro.slots.has("title")) && (
                 <TitleTag
-                  data-slot="title"
                   class:list={[classes.title]}
                 >
                   <slot name="title">
-                    {Astro.props.title}
+                    {title}
                   </slot>
                 </TitleTag>
               )}
 
-              {(Astro.props.description || Astro.slots.has("description")) && (
+              {(description || Astro.slots.has("description")) && (
                 <div
-                  data-slot="description"
                   class:list={[classes.description]}
                 >
                   <slot name="description">
-                    {Astro.props.description}
+                    {description}
                   </slot>
                 </div>
               )}
@@ -169,25 +114,22 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
 
         {Astro.slots.has("body") && (
           <div
-            data-slot="body"
             class:list={[classes.body]}
           >
             <slot name="body" />
           </div>
         )}
 
-        {(Astro.slots.has("footer") || Astro.slots.has("links") || Astro.props.links?.length) && (
+        {(Astro.slots.has("footer") || Astro.slots.has("links") || links?.length) && (
           <div
-            data-slot="footer"
             class:list={[classes.footer]}
           >
             <slot name="footer">
-              {(Astro.props.links?.length || Astro.slots.has("links")) && (
+              {(links?.length || Astro.slots.has("links")) && (
                 <div
-                  data-slot="links"
                   class:list={[classes.links]}
                 >
-                  {Astro.props.links?.map((link) => (
+                  {links?.map((link) => (
                     <RLAButton size="lg" {...link} />
                   ))}
                   <slot name="links" />