@rimelight/ui 0.0.28 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.28",
+  "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,7 +1,7 @@
 ---
 import { scv, cx } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { ButtonProps } from "../../types"
 import buttonThemeDefault, { createButtonTheme } from "../../themes/button.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
@@ -9,26 +9,6 @@ const uiConfig = getUIConfig()
 const buttonTheme = uiConfig.colors ? createButtonTheme(uiConfig.colors) : buttonThemeDefault
 
 const button = scv(buttonTheme)
-type ButtonVariants = ComponentVariants<typeof 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 {
   variant = "solid",
@@ -47,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,9 +1,8 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { EmbedYoutubeProps } from "../../types"
 import embedYoutubeTheme from "../../themes/embedYoutube.theme"
-import type { RLAIconProps } from "./RLAIcon.astro"
 import { Image } from "astro:assets"
 
 const PLACEHOLDER_THUMBNAIL = "/assets/placeholder.webp";
@@ -111,27 +110,6 @@ function getYoutubeEmbedUrl(rawUrl: string): string | null {
 }
 
 const embedYoutube = scv(embedYoutubeTheme)
-type EmbedYoutubeVariants = ComponentVariants<typeof embedYoutubeTheme>
-
-export interface RLAEmbedYoutubeProps {
-  /**
-   * The URL of the YouTube video to embed.
-   */
-  src: string;
-  /**
-    * The title of the video to display.
-    * @default "YouTube Video Player"
-    */
-  title?: string;
-  /**
-   * The name of the icon to display in the play trigger overlay.
-   * @default "i-lucide-play"
-   */
-  icon?: RLAIconProps["name"];
-  ui?: ComponentSlots<typeof embedYoutubeTheme>;
-  class?: any;
-  [key: string]: unknown;
-}
 
 const {
   src,
@@ -140,11 +118,11 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as RLAEmbedYoutubeProps;
+} = Astro.props as EmbedYoutubeProps
 
 const classes = resolveClasses(embedYoutube, {
-  title: !!(Astro.slots.has("title") || Astro.props.title),
-  icon: !!(Astro.slots.has("icon") || Astro.props.icon),
+  title: !!(Astro.slots.has("title") || title),
+  icon: !!(Astro.slots.has("icon") || icon),
 }, useUi("embedYoutube", uiProp), className);
 
 const embedUrl = getYoutubeEmbedUrl(src);

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);
 
@@ -106,53 +58,53 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
   <div
     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
         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
             class:list={[classes.header]}
           >
             <slot name="header">
-              {(Astro.props.icon || Astro.slots.has("leading")) && (
+              {(icon || Astro.slots.has("leading")) && (
                 <div
                   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
                   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
                   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
                   class:list={[classes.description]}
                 >
                   <slot name="description">
-                    {Astro.props.description}
+                    {description}
                   </slot>
                 </div>
               )}
@@ -168,16 +120,16 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
           </div>
         )}
 
-        {(Astro.slots.has("footer") || Astro.slots.has("links") || Astro.props.links?.length) && (
+        {(Astro.slots.has("footer") || Astro.slots.has("links") || links?.length) && (
           <div
             class:list={[classes.footer]}
           >
             <slot name="footer">
-              {(Astro.props.links?.length || Astro.slots.has("links")) && (
+              {(links?.length || Astro.slots.has("links")) && (
                 <div
                   class:list={[classes.links]}
                 >
-                  {Astro.props.links?.map((link) => (
+                  {links?.map((link) => (
                     <RLAButton size="lg" {...link} />
                   ))}
                   <slot name="links" />

package/src/components/vue/RLVButton.vue

@@ -2,72 +2,10 @@
 import { computed, useSlots } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { ButtonProps } from "../../types/components/button"
 import buttonTheme from "../../themes/button.theme"
 
 const button = scv(buttonTheme)
-type ButtonVariants = ComponentVariants<typeof buttonTheme>
-
-export interface RLVButtonProps {
-  /**
-   * The visual style variant of the button
-   */
-  variant?: ButtonVariants["variant"]
-  /**
-   * The color scheme applied to the button
-   */
-  color?: ButtonVariants["color"]
-  /**
-   * The size scale of the button
-   */
-  size?: ButtonVariants["size"]
-  /**
-   * When provided, renders the button as an anchor link
-   */
-  href?: string
-  /**
-   * The text label displayed inside the button
-   */
-  label?: string
-  /**
-   * Icon name displayed before the label
-   */
-  leadingIcon?: string
-  /**
-   * Icon name displayed after the label
-   */
-  trailingIcon?: string
-  /**
-   * Shows a loading spinner animation
-   */
-  loading?: boolean
-  /**
-   * Renders a square button with equal padding
-   */
-  square?: boolean
-  /**
-   * Makes the button stretch to full width
-   */
-  block?: boolean
-  /**
-   * Applies active state styling
-   */
-  active?: boolean
-  /**
-   * Color used when button is in active state
-   */
-  activeColor?: ButtonVariants["color"]
-  /**
-   * Variant used when button is in active state
-   */
-  activeVariant?: ButtonVariants["variant"]
-  /**
-   * Component-specific CSS class overrides
-   */
-  ui?: ComponentSlots<typeof buttonTheme>
-  class?: any
-  [key: string]: unknown
-}
 
 const {
   variant = "solid",
@@ -85,7 +23,7 @@ const {
   activeVariant,
   ui: uiProp,
   class: className
-} = defineProps<RLVButtonProps>()
+} = defineProps<ButtonProps>()
 
 const slots = useSlots()
 

package/src/components/vue/RLVFooter.vue

@@ -2,19 +2,12 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { FooterProps } from "../../types/components/footer"
 import footerTheme from "../../themes/footer.theme"
 
 const footer = scv(footerTheme)
-type FooterVariants = ComponentVariants<typeof footerTheme>
 
-export interface RLVFooterProps {
-  contain?: FooterVariants["contain"]
-  ui?: ComponentSlots<typeof footerTheme>
-  class?: any
-}
-
-const { contain = false, ui: uiProp, class: className } = defineProps<RLVFooterProps>()
+const { contain = false, ui: uiProp, class: className } = defineProps<FooterProps>()
 
 defineSlots<{
   left(props: {}): any

package/src/components/vue/RLVHeader.vue

@@ -2,22 +2,11 @@
 import { computed, onMounted, onUnmounted, ref } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { HeaderProps } from "../../types/components/header"
 import headerTheme from "../../themes/header.theme"
 import { getHeaderStack } from "../../utils/headerStack"
 
 const header = scv(headerTheme)
-type HeaderVariants = ComponentVariants<typeof headerTheme>
-
-export interface RLVHeaderProps {
-  contain?: HeaderVariants["contain"]
-  sticky?: HeaderVariants["sticky"]
-  fixed?: HeaderVariants["fixed"]
-  stackIndex?: number
-  hideOnScroll?: boolean
-  ui?: ComponentSlots<typeof headerTheme>
-  class?: any
-}
 
 const {
   contain = true,
@@ -27,7 +16,7 @@ const {
   hideOnScroll = false,
   ui: uiProp,
   class: className
-} = defineProps<RLVHeaderProps>()
+} = defineProps<HeaderProps>()
 
 defineSlots<{
   left(props: {}): any