@rimelight/ui 0.0.31 → 0.0.33

package/README.md

@@ -1,30 +1,157 @@
-# @rimelight/ui
-
-The core UI library for Rimelight projects.
-
-## Features
-
-- Astro components
-- Design system configurations
-- Domain-specific utilities
-- Optimized for performance and accessibility
-
-## Installation
-
-```bash
-pnpm add @rimelight/ui
-```
-
-## Usage
-
-```astro
----
-import { YoutubeEmbed } from '@rimelight/ui/components/embeds';
----
-
-<YoutubeEmbed id="..." />
-```
-
-## License
-
-MIT
+# Rimelight UI (@rimelight/ui)
+
+[![Built with Astro](https://astro.badg.es/v2/built-with-astro/small.svg)](https://astro.build) &nbsp;
+
+[![PLAYGROUND](https://img.shields.io/badge/PLAYGROUND-A682FF?style=for-the-badge&logo=astro&logoColor=white)](https://playground.rimelight.com/ui) &nbsp;
+[![DOCUMENTATION](https://img.shields.io/badge/DOCUMENTATION-A682FF?style=for-the-badge&logo=astro&logoColor=white)](https://rimelight.com/company/docs/packages/rimelight-ui/) &nbsp;
+
+[![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) &nbsp;
+[![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) &nbsp;
+[![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) &nbsp;
+
+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
+
+- **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 { RLAButton } from '@rimelight/ui/components/astro/RLAButton.astro';
+---
+
+<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,108 +1,105 @@
-{
-  "name": "@rimelight/ui",
-  "version": "0.0.31",
-  "private": false,
-  "description": "Rimelight Entertainment UI Library.",
-  "keywords": [
-    "astro",
-    "typescript"
-  ],
-  "homepage": "https://rimelight.com/docs",
-  "bugs": {
-    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Daniel Marchi"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
-  },
-  "files": [
-    "src",
-    "worker-configuration.d.ts",
-    "README.md",
-    "LICENSE"
-  ],
-  "type": "module",
-  "exports": {
-    ".": "./src/integrations/index.ts",
-    "./styles/*": "./src/styles/*",
-    "./components/*": "./src/components/*",
-    "./components/astro/*": "./src/components/astro/*",
-    "./components/vue/*": "./src/components/vue/*",
-    "./themes": "./src/themes/index.ts",
-    "./themes/*": "./src/themes/*",
-    "./composables": "./src/composables/index.ts",
-    "./composables/*": "./src/composables/*",
-    "./config": "./src/config/index.ts",
-    "./config/*": "./src/config/*",
-    "./utils": "./src/utils/index.ts",
-    "./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",
-    "./presets/*": "./src/presets/*",
-    "./*": "./src/*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "prepare": "vp config",
-    "knip": "knip",
-    "astro": "astro",
-    "docs:meta": "tsx scripts/extract-meta.ts"
-  },
-  "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",
-    "css-variants": "2.3.5",
-    "defu": "6.1.7",
-    "embla-carousel": "8.6.0",
-    "picomatch": "^4.0.4",
-    "tailwindcss": "^4.2.3",
-    "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",
-    "@types/picomatch": "^4.0.3",
-    "@unocss/eslint-plugin": "66.6.8",
-    "astro": "6.3.6",
-    "eslint-plugin-regexp": "3.1.0",
-    "knip": "6.14.1",
-    "tsx": "4.22.1",
-    "typescript": "6.0.3",
-    "unocss": "66.6.8",
-    "vite-plus": "0.1.21"
-  },
-  "peerDependencies": {
-    "@astrojs/starlight": ">=0.5.0",
-    "astro": ">=6.0.0",
-    "vue": ">=3.4.0"
-  },
-  "peerDependenciesMeta": {
-    "vue": {
-      "optional": true
-    }
-  },
-  "packageManager": "pnpm@11.1.2"
-}
+{
+  "name": "@rimelight/ui",
+  "version": "0.0.33",
+  "private": false,
+  "description": "Rimelight Entertainment UI Library.",
+  "keywords": [
+    "astro",
+    "typescript"
+  ],
+  "homepage": "https://rimelight.com/docs",
+  "bugs": {
+    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Daniel Marchi"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
+  },
+  "files": [
+    "src",
+    "worker-configuration.d.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/integrations/index.ts",
+    "./styles/*": "./src/styles/*",
+    "./components/*": "./src/components/*",
+    "./components/astro/*": "./src/components/astro/*",
+    "./components/vue/*": "./src/components/vue/*",
+    "./themes": "./src/themes/index.ts",
+    "./themes/*": "./src/themes/*",
+    "./composables": "./src/composables/index.ts",
+    "./composables/*": "./src/composables/*",
+    "./config": "./src/config/index.ts",
+    "./config/*": "./src/config/*",
+    "./utils": "./src/utils/index.ts",
+    "./utils/*": "./src/utils/*",
+    "./integrations": "./src/integrations/index.ts",
+    "./integrations/*": "./src/integrations/*",
+    "./plugins": "./src/plugins/index.ts",
+    "./plugins/*": "./src/plugins/*",
+    "./middleware": "./src/middleware/index.ts",
+    "./middleware/*": "./src/middleware/*",
+    "./types": "./src/types/index.ts",
+    "./types/*": "./src/types/*",
+    "./presets": "./src/presets/index.ts",
+    "./presets/*": "./src/presets/*",
+    "./*": "./src/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "vp config",
+    "knip": "knip",
+    "astro": "astro",
+    "docs:meta": "tsx scripts/extract-meta.ts"
+  },
+  "dependencies": {
+    "@astrojs/prism": "^4.0.2",
+    "@astrojs/vue": "7.0.0-alpha.0",
+    "prismjs": "^1.29.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",
+    "turndown": "^7.2.4",
+    "turndown-plugin-gfm": "^1.0.2",
+    "vite-plugin-virtual": "^0.5.0"
+  },
+  "devDependencies": {
+    "@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.7.0",
+    "astro": "7.0.0-alpha.0",
+    "eslint-plugin-regexp": "3.1.0",
+    "knip": "6.14.2",
+    "tsx": "4.22.3",
+    "typescript": "6.0.3",
+    "unocss": "66.7.0",
+    "vite-plus": "catalog:"
+  },
+  "peerDependencies": {
+    "@astrojs/starlight": ">=0.5.0",
+    "astro": ">=6.0.0",
+    "vue": ">=3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "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

@@ -0,0 +1,23 @@
+---
+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>