@rimelight/ui 0.0.32 → 0.0.34

package/README.md

@@ -1,30 +1,157 @@
-# @rimelight/ui
+# Rimelight UI (@rimelight/ui)
 
-The core UI library for Rimelight projects.
+[![Built with Astro](https://astro.badg.es/v2/built-with-astro/small.svg)](https://astro.build)  
+
+[![PLAYGROUND](https://img.shields.io/badge/PLAYGROUND-A682FF?style=for-the-badge&logo=astro&logoColor=white)](https://playground.rimelight.com/ui)  
+[![DOCUMENTATION](https://img.shields.io/badge/DOCUMENTATION-A682FF?style=for-the-badge&logo=astro&logoColor=white)](https://rimelight.com/company/docs/packages/rimelight-ui/)  
+
+[![NPM Version](https://img.shields.io/npm/v/@rimelight/ui?style=for-the-badge&logo=npm&logoColor=white&color=A682FF)](https://www.npmjs.com/package/@rimelight/ui)  
+[![NPM Downloads](https://img.shields.io/npm/dt/@rimelight/ui?style=for-the-badge&color=A682FF&logo=npm&logoColor=white)](https://www.npmjs.com/package/@rimelight/ui)  
+[![View on npmx](https://img.shields.io/badge/VIEW%20ON%20NPMX-A682FF?style=for-the-badge&logo=npm&logoColor=white)](https://npmx.dev/package/@rimelight/ui)  
+
+Rimelight UI is a comprehensive component library for [Astro](https://astro.build) websites used and maintained by [Rimelight Entertainment](https://rimelight.com).
+It offers a suite of accessible and highly performant components as [Astro Components](https://docs.astro.build/basics/astro-components/) and [Vue Components](https://vuejs.org), and is available as a free and open source project for any to use.
 
 ## Features
 
-- Astro components
-- Design system configurations
-- Domain-specific utilities
-- Optimized for performance and accessibility
+- **Multiple Frameworks**: Astro, Vue, and more with a unified usage pattern - use what suits your project best.
+- **Intuitive**: Simple APIs, comprehensive documentation, and convenient integrations.
+- **Accessible**: All components are WAI-ARIA compliant and include keyboard navigation, focus management, and
+  screen reader support.
+- **Customizable**: Create your own design system by overriding styles and variants globally or per instance.
+- **Performant**: Fully type-safe, SEO-friendly, modern and lean dependencies, and blazing fast.
+
+For a complete list of available components, refer to the [documentation](https://rimelight.com/company/docs/packages/rimelight-ui/).
 
 ## Installation
 
+To use Rimelight UI in an Astro project, you need to install the package and add the integration.
+
+1. Install the package into your project:
+
 ```bash
+# vp
+vp install @rimelight/ui
+
+# npm
+npm install @rimelight/ui
+
+# pnpm
 pnpm add @rimelight/ui
+
+# yarn
+yarn add @rimelight/ui
+
+# deno
+deno add npm:@rimelight/ui
+
+# bun
+bun add @rimelight/ui
+```
+
+2. Add the Rimelight UI Astro integration to your Astro configuration:
+
+```typescript
+// astro.config.ts
+import { ui } from "@rimelight/ui/integrations"
+import { defineConfig } from "astro/config"
+
+export default defineConfig({
+  integrations: [
+    ui({
+      // Optional: Provide global UI overrides
+      ui: {
+        button: {
+          defaultVariants: { variant: "primary" }
+        }
+      }
+    })
+  ]
+})
 ```
 
 ## Usage
 
+### Astro Components
+
 ```astro
+// component.astro
+
 ---
-import { YoutubeEmbed } from '@rimelight/ui/components/embeds';
+import { RLAButton } from '@rimelight/ui/components/astro/RLAButton.astro';
 ---
 
-<YoutubeEmbed id="..." />
+<RLAButton label="Click Me" />
+```
+
+### Vue Components
+
+```vue
+// component.vue
+
+<script setup lang="ts">
+import { RLVButton } from "@rimelight/ui/components/vue/RLVButton.vue"
+</script>
+
+<template>
+  <RLVButton label="Click Me" />
+</template>
 ```
 
+For mixed usage please refer to the [Astro documentation on using front-end frameworks](https://docs.astro.build/en/guides/framework-components/).
+
+You can add the FAQ section right toward the bottom of your README, typically just before the Contributing or Support sections.
+
+Since GitHub and most Markdown viewers natively support the <details> and <summary> HTML tags, they will render as interactive accordion dropdowns, keeping your README clean and compact.
+
+Here is the exact code block to drop into your Repository README:
+
+Markdown
+
+## Frequently Asked Questions
+
+<details>
+  <summary><b>Is Rimelight UI free to use?</b></summary>
+    Yes. Rimelight UI is a completely free and open source package under the <a href="./LICENSE">MIT License</a>.
+</details>
+
+<details>
+  <summary><b>Can I use Rimelight UI without Astro?</b></summary>
+    For the time being, no. The library is strictly distributed as an Astro integration. However, in theory, it could be modularized enough to be usable as a Vite plugin, and we are open to contributions on this topic.
+</details>
+
+<details>
+  <summary><b>Are other front-end frameworks supported?</b></summary>
+     For the time being, no. The library currently only offers Astro and Vue components, but in theory could support other front-end frameworks, and we welcome community contributions to expand this.
+</details>
+
+<details>
+  <summary><b>Is Rimelight UI customizable?</b></summary>
+    Yes. All components can have their styles overridden per slot and per variant, either globally via your <code>astro.config.ts</code> configuration or locally on an individual instance using the <code>ui</code> prop.
+</details>
+
+<details>
+  <summary><b>Is Rimelight UI accessible?</b></summary> 
+    Yes. All components provide automatic ARIA attributes, keyboard navigation, focus management, and screen reader support out of the box.
+</details>
+
+## Useful Links
+
+- [Starter Project](https://starter.rimelight.com)
+- [Playground](https://playground.rimelight.com/ui)
+- [Documentation](https://rimelight.com/company/docs/packages/rimelight-ui/)
+- [Changelog](https://rimelight.com/company/docs/packages/rimelight-ui/changelog/)
+
+## Contributing
+
+We welcome contributions to this project and its documentation. If you are interested in contributing, please refer to our [contribution guidelines](https://rimelight.com/company/docs/contributing/).
+
+If you would like to financially support this project, please consider [sponsoring us](https://rimelight.com/company/docs/contributing/sponsoring/).
+
+## Support
+
+If you have any questions or need assistance, please feel free to reach out to us at [support@rimelight.com](mailto:support@rimelight.com).
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -42,12 +42,10 @@
     "./utils/*": "./src/utils/*",
     "./integrations": "./src/integrations/index.ts",
     "./integrations/*": "./src/integrations/*",
-    "./integrations/vue-entrypoint": "./src/integrations/vue-entrypoint.ts",
     "./plugins": "./src/plugins/index.ts",
     "./plugins/*": "./src/plugins/*",
     "./middleware": "./src/middleware/index.ts",
     "./middleware/*": "./src/middleware/*",
-    "./nuxt": "./src/nuxt.ts",
     "./types": "./src/types/index.ts",
     "./types/*": "./src/types/*",
     "./presets": "./src/presets/index.ts",
@@ -65,34 +63,33 @@
   },
   "dependencies": {
     "@astrojs/prism": "^4.0.2",
-    "@astrojs/vue": "6.0.1",
-    "@iconify-json/lucide": "^1.2.108",
-    "@nuxt/ui": "4.7.1",
-    "@tailwindcss/vite": "^4.3.0",
-    "@unocss/astro": "^66.6.8",
+    "@astrojs/vue": "7.0.0-alpha.0",
+    "@iconify-json/lucide": "^1.2.109",
+    "@unocss/astro": "^66.7.0",
     "css-variants": "2.3.5",
     "defu": "6.1.7",
     "embla-carousel": "8.6.0",
+    "nanostores": "1.3.0",
     "picomatch": "^4.0.4",
-    "tailwindcss": "^4.2.3",
+    "prismjs": "^1.29.0",
     "turndown": "^7.2.4",
     "turndown-plugin-gfm": "^1.0.2",
     "vite-plugin-virtual": "^0.5.0"
   },
   "devDependencies": {
-    "@astrojs/check": "0.9.8",
-    "@astrojs/ts-plugin": "1.10.8",
-    "@e18e/eslint-plugin": "0.3.0",
-    "@types/node": "25.8.0",
+    "@astrojs/check": "0.9.9",
+    "@astrojs/ts-plugin": "1.10.9",
+    "@e18e/eslint-plugin": "0.5.0",
+    "@types/node": "25.9.1",
     "@types/picomatch": "^4.0.3",
-    "@unocss/eslint-plugin": "66.6.8",
-    "astro": "6.3.6",
+    "@unocss/eslint-plugin": "66.7.0",
+    "astro": "7.0.0-alpha.0",
     "eslint-plugin-regexp": "3.1.0",
-    "knip": "6.14.1",
-    "tsx": "4.22.1",
+    "knip": "6.14.2",
+    "tsx": "4.22.3",
     "typescript": "6.0.3",
-    "unocss": "66.6.8",
-    "vite-plus": "0.1.21"
+    "unocss": "66.7.0",
+    "vite-plus": "catalog:"
   },
   "peerDependencies": {
     "@astrojs/starlight": ">=0.5.0",
@@ -104,5 +101,5 @@
       "optional": true
     }
   },
-  "packageManager": "pnpm@11.1.2"
+  "packageManager": "pnpm@11.3.0"
 }

package/src/components/TableOfContents.astro

@@ -1,32 +1,50 @@
 ---
 export interface TableOfContentsHeading {
-  depth: number; // The heading level (h1 = 1, h2 = 2, etc)
-  slug: string; // The ID of the heading for linking
-  text: string; // The text content of the heading
+  depth: number;
+  slug: string;
+  text: string;
+}
+
+export interface TableOfContentsConfig {
+  minHeadingLevel?: number;
+  maxHeadingLevel?: number;
 }
 
 export interface TableOfContentsProps {
-  headings: TableOfContentsHeading[]; // Array of headings from your markdown content
-  levels?: 1 | 2 | 3; // How many levels of headers to show in TOC (default: 2)
+  headings: TableOfContentsHeading[];
+  /** false = hide entirely, object = heading level bounds */
+  tableOfContents?: false | TableOfContentsConfig;
+  /** @deprecated use tableOfContents.maxHeadingLevel instead */
+  levels?: 1 | 2 | 3;
 }
 
 type Props = TableOfContentsProps;
 
-const { headings, levels = 2 } = Astro.props as Props;
+const { headings, tableOfContents, levels = 2 } = Astro.props as Props;
+
+if (tableOfContents === false) {
+  // Render nothing — parent should also skip rendering this component,
+  // but guard here as a safety net.
+}
+
+const minLevel = (tableOfContents !== false && tableOfContents?.minHeadingLevel) ?? 2;
+const maxLevel = (tableOfContents !== false && tableOfContents?.maxHeadingLevel) ?? levels;
 
-// Filter headings to only show up to the specified level
-const filteredHeadings = headings.filter((heading) => heading.depth <= levels);
+const filteredHeadings = tableOfContents !== false
+  ? headings.filter(h => h.depth >= minLevel && h.depth <= maxLevel)
+  : [];
 ---
 
-<div class="border-base-400 rounded-xs border p-3xs text-sm leading-tight">
-  <h4 class="text-xl font-medium">Table of Contents</h4>
-  <ul class="mt-2xl flex flex-col gap-3xs">
-    {
-      filteredHeadings.map((heading) => (
+{tableOfContents !== false && filteredHeadings.length > 0 && (
+  <div class="border-border rounded-xs border p-3xs text-sm leading-tight">
+    <h4 class="text-xl font-medium">On this page</h4>
+    <ul class="mt-2xl flex flex-col gap-3xs">
+      {filteredHeadings.map(heading => (
         <li
           class:list={{
             "pl-3xs": heading.depth === 2,
             "pl-6": heading.depth === 3,
+            "pl-9": heading.depth >= 4
           }}
         >
           <a
@@ -36,10 +54,10 @@ const filteredHeadings = headings.filter((heading) => heading.depth <= levels);
             {heading.text}
           </a>
         </li>
-      ))
-    }
-  </ul>
-</div>
+      ))}
+    </ul>
+  </div>
+)}
 
 <style>
   .toc-current {
@@ -49,58 +67,41 @@ const filteredHeadings = headings.filter((heading) => heading.depth <= levels);
 </style>
 
 <script>
-  // Wrapper for Blog post content
   let wrappingElement: Element | null;
   let observeHeaderTags: IntersectionObserver;
   let allHeaderTags: NodeListOf<Element>;
 
-  // Function that runs when the Intersection Observer fires
   function setCurrent(e: IntersectionObserverEntry[]) {
-    var allSectionLinks = document.querySelectorAll(".toc-link");
-    e.map((i) => {
+    const allSectionLinks = document.querySelectorAll(".toc-link");
+    e.map(i => {
       if (i.isIntersecting === true) {
-        allSectionLinks.forEach((link) => link.classList.remove("toc-current"));
-        const targetLink = document.querySelector(
-          `a[href="#${i.target.id}"].toc-link`,
-        );
-
+        allSectionLinks.forEach(link => link.classList.remove("toc-current"));
+        const targetLink = document.querySelector(`a[href="#${i.target.id}"].toc-link`);
         if (targetLink) targetLink.classList.add("toc-current");
       }
     });
   }
 
   function initTOC() {
-    // update this with whatever class wraps your blog post content
     wrappingElement = document.querySelector(".markdown-content");
     if (wrappingElement !== null) {
-      // Get all H1/H2/H3 tags from the post
-      allHeaderTags = wrappingElement.querySelectorAll(
-        ":scope > h1, :scope > h2, :scope > h3",
-      );
+      allHeaderTags = wrappingElement.querySelectorAll(":scope > h1, :scope > h2, :scope > h3, :scope > h4");
     }
 
-    // Intersection Observer Options
-    let options: IntersectionObserverInit = {
+    const options: IntersectionObserverInit = {
       root: null,
       rootMargin: "0px 0px -50% 0px",
-      threshold: [1],
+      threshold: [1]
     };
 
-    // Each Intersection Observer runs setCurrent
     observeHeaderTags = new IntersectionObserver(setCurrent, options);
-    if (wrappingElement === null) {
-      return;
-    }
-    allHeaderTags.forEach((tag) => {
-      // add scroll margin top to account for fixed navbar
+    if (wrappingElement === null) return;
+    allHeaderTags.forEach(tag => {
       tag.classList.add("scroll-mt-3xl");
       observeHeaderTags.observe(tag);
     });
   }
 
-  // runs on initial page load
   initTOC();
-
-  // runs on view transitions navigation
   document.addEventListener("astro:after-swap", initTOC);
 </script>

package/src/components/astro/RLA3dHover.astro

@@ -1,19 +1,23 @@
----
-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 />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ThreeDHoverProps } from "../../types"
+import hover3dThemeDefault, { create3dHoverTheme } from "../../themes/3d-hover.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const hover3dTheme = uiConfig.colors ? create3dHoverTheme() : hover3dThemeDefault
+
+const hover3d = scv(hover3dTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ThreeDHoverProps
+
+const classes = resolveClasses(hover3d, {}, useUi("3dHover", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAAlert.astro

@@ -1,62 +1,93 @@
----
-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>
+---
+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"
+import RLAAvatar from "./RLAAvatar.astro"
+
+const uiConfig = getUIConfig()
+const alertTheme = uiConfig.colors ? createAlertTheme(uiConfig.colors) : alertThemeDefault
+const alert = scv(alertTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  title,
+  description,
+  icon,
+  avatar,
+  actions,
+  close,
+  orientation = "horizontal",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AlertProps
+
+const isIcon = !!(icon || Astro.slots.has("icon"))
+
+const classes = resolveClasses(alert, {
+  variant,
+  color,
+  orientation,
+  title: !!(title || Astro.slots.has("title")),
+  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>
+
+  <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>
+
+  <div class={classes.wrapper} data-slot="wrapper">
+    {(title || Astro.slots.has("title")) && (
+      <h5 class={classes.title} data-slot="title">
+        {title}
+        <slot name="title" />
+      </h5>
+    )}
+
+    {(description || Astro.slots.has("default")) && (
+      <div class={classes.description} data-slot="description">
+        {description}
+        <slot />
+      </div>
+    )}
+
+    {(actions || Astro.slots.has("actions")) && (
+      <div class={classes.actions} data-slot="actions">
+        <slot name="actions" />
+      </div>
+    )}
+  </div>
+
+  <slot name="close" {...{ ui: classes }}>
+    {close && (
+      <button class={classes.close} data-slot="close">
+        <span class="i-lucide-x size-4" />
+      </button>
+    )}
+  </slot>
+</div>

package/src/components/astro/RLAApp.astro

@@ -1,19 +1,23 @@
----
-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 />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AppProps } from "../../types"
+import appThemeDefault, { createAppTheme } from "../../themes/app.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const appTheme = uiConfig.colors ? createAppTheme() : appThemeDefault
+
+const app = scv(appTheme)
+
+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>