@rimelight/ui 0.0.23 → 0.0.25

package/src/components/vue/RLVPlaceholder.vue

@@ -1,31 +1,14 @@
 <script setup lang="ts">
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { placeholderTheme } from "../../themes/placeholder.theme.ts"
-import { getUIConfig } from "virtual:rimelight-ui"
+import { computed } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import placeholderTheme from "../../themes/placeholder.theme"
 
-const placeholder = scv({
-  slots: [...placeholderTheme.slots],
-  base: placeholderTheme.base,
-  variants: placeholderTheme.variants,
-  compoundVariants: [...placeholderTheme.compoundVariants],
-  defaultVariants: placeholderTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
+const placeholder = scv(placeholderTheme)
 
 export interface RLVPlaceholderProps {
-  /**
-   * UI overrides for individual slots, derived from the placeholder theme.
-   */
-  ui?: Partial<Record<keyof typeof placeholderTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
+  ui?: Partial<Record<string, string>>
   class?: string
-  /**
-   * Standard HTML attributes.
-   */
   [key: string]: unknown
 }
 
@@ -38,19 +21,14 @@ defineSlots<{
   default(props: {}): any
 }>()
 
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.placeholder as Record<string, unknown>) ?? {}
-) as Record<keyof typeof placeholderTheme.base, string | undefined>
-
-const { base, svg } = placeholder()
+const resolvedClasses = computed(() =>
+  resolveClasses(placeholder, {}, useUi("placeholder", uiProp), className)
+)
 </script>
 
 <template>
-  <div :class="twMerge(base, mergedUI.base, className)" v-bind="$attrs">
-    <svg :class="twMerge(svg, mergedUI.svg)">
+  <div :class="resolvedClasses.base" v-bind="$attrs">
+    <svg :class="resolvedClasses.svg">
       <defs>
         <pattern
           id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

package/src/components/vue/RLVScrollToTop.vue

@@ -1,66 +1,24 @@
 <script setup lang="ts">
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { scrollToTopTheme } from "../../themes/scroll-to-top.theme.ts"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants } from "../../types"
+import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 import { useScrollToTop } from "../../composables/useScrollToTop"
 import { computed } from "vue"
-import { getUIConfig } from "virtual:rimelight-ui"
+
+const scrollToTop = scv(scrollToTopTheme)
+type ScrollToTopVariants = ComponentVariants<typeof scrollToTopTheme>
 
 export interface RLVScrollToTopProps {
-  /**
-   * Button color.
-   *
-   * @default "primary"
-   */
-  color?: keyof typeof scrollToTopTheme.variants.color
-  /**
-   * Transition duration for the progress circle (in seconds).
-   *
-   * @default 0.1
-   */
+  color?: ScrollToTopVariants["color"]
+  progressWidth?: number
   duration?: number
-  /**
-   * Scroll threshold (in pixels) before the button becomes visible.
-   *
-   * @default 200
-   */
   threshold?: number
-  /**
-   * Whether to show the scroll progress indicator.
-   *
-   * @default false
-   */
   showProgress?: boolean
-  /**
-   * Stroke width of the progress circle.
-   *
-   * @default 6
-   */
-  progressWidth?: number
-  /**
-   * UI overrides for individual slots, derived from the scroll-to-top theme.
-   */
-  ui?: Partial<Record<keyof typeof scrollToTopTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
+  ui?: Partial<Record<string, string>>
   class?: string
-  /**
-   * Standard HTML attributes.
-   */
-  [key: string]: unknown
 }
 
-const scrollToTop = scv({
-  slots: [...scrollToTopTheme.slots],
-  base: scrollToTopTheme.base,
-  variants: scrollToTopTheme.variants,
-  compoundVariants: [...scrollToTopTheme.compoundVariants],
-  defaultVariants: scrollToTopTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
-
 const {
   color = "primary",
   progressWidth = 6,
@@ -71,23 +29,7 @@ const {
   class: className
 } = defineProps<RLVScrollToTopProps>()
 
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig["scroll-to-top"] as Record<string, unknown>) ?? {}
-) as Record<keyof typeof scrollToTopTheme.base, string | undefined>
-
-const {
-  root,
-  button,
-  progressBase,
-  svg: svgClass,
-  iconContainer,
-  icon
-} = scrollToTop({
-  color
-})
+const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
 
 const {
   isVisible,
@@ -107,25 +49,12 @@ const durationInSeconds = computed(() => `${duration}s`)
 
 <template>
   <div
-    :class="[
-      'rla-scroll-to-top fixed bottom-6 right-6 z-50',
-      { visible: isVisible },
-      twMerge(root, mergedUI.root, className)
-    ]"
+    :class="['rla-scroll-to-top fixed bottom-6 right-6 z-50', { visible: isVisible }, classes.root]"
     v-bind="$attrs"
   >
-    <button
-      type="button"
-      :class="twMerge(button, mergedUI.button)"
-      aria-label="Scroll to top"
-      @click="scrollToTopFn"
-    >
-      <div :class="twMerge(progressBase, mergedUI.progressBase)">
-        <svg
-          :class="twMerge(svgClass, mergedUI.svg)"
-          viewBox="0 0 100 100"
-          shape-rendering="geometricPrecision"
-        >
+    <button type="button" :class="classes.button" aria-label="Scroll to top" @click="scrollToTopFn">
+      <div :class="classes.progressBase">
+        <svg :class="classes.svg" viewBox="0 0 100 100" shape-rendering="geometricPrecision">
           <circle
             cx="50"
             cy="50"
@@ -153,7 +82,7 @@ const durationInSeconds = computed(() => `${duration}s`)
             }"
           />
         </svg>
-        <div :class="twMerge(iconContainer, mergedUI.iconContainer)">
+        <div :class="classes.iconContainer">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -164,7 +93,7 @@ const durationInSeconds = computed(() => `${duration}s`)
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            :class="twMerge(icon, mergedUI.icon)"
+            :class="classes.icon"
           >
             <path d="m5 12 7-7 7 7" />
             <path d="M12 19V5" />

package/src/components/vue/RLVSection.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants } from "../../types"
+import sectionTheme from "../../themes/section.theme"
+
+const section = scv(sectionTheme)
+type SectionVariants = ComponentVariants<typeof sectionTheme>
+
+export interface RLVSectionProps {
+  variant?: SectionVariants["variant"]
+  headline?: string
+  icon?: string
+  title?: string
+  description?: string
+  orientation?: SectionVariants["orientation"]
+  reverse?: boolean
+  ctaVariant?: SectionVariants["ctaVariant"]
+  ui?: Partial<Record<string, string>>
+  class?: string
+}
+
+const {
+  variant = "default",
+  orientation = "vertical",
+  reverse = false,
+  ctaVariant = "outline",
+  class: className,
+  ui: uiProp
+} = defineProps<RLVSectionProps>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    section,
+    {
+      variant,
+      orientation,
+      reverse,
+      ...(variant === "cta" && { ctaVariant }),
+      headline: false,
+      title: false,
+      description: false,
+      body: false
+    },
+    useUi("section", uiProp),
+    className
+  )
+)
+</script>
+
+<template>
+  <div data-slot="rlv-section" :class="[resolvedClasses.root]" v-bind="$attrs">
+    <slot name="background">
+      <div :class="resolvedClasses.background" data-slot="background">
+        <slot name="background" />
+      </div>
+    </slot>
+
+    <slot name="top" />
+
+    <div :class="resolvedClasses.container">
+      <div :class="resolvedClasses.wrapper">
+        <div :class="resolvedClasses.header">
+          <slot name="leading">
+            <span v-if="icon" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
+              <span :class="icon" aria-hidden="true" />
+            </span>
+          </slot>
+
+          <div v-if="headline" :class="resolvedClasses.headline">
+            {{ headline }}
+          </div>
+
+          <h2 v-if="title" :class="resolvedClasses.title">
+            {{ title }}
+          </h2>
+
+          <div v-if="description" :class="resolvedClasses.description">
+            {{ description }}
+          </div>
+        </div>
+
+        <div :class="resolvedClasses.body">
+          <slot name="body" />
+        </div>
+
+        <div :class="resolvedClasses.footer">
+          <slot name="links" />
+        </div>
+      </div>
+
+      <slot />
+    </div>
+
+    <slot name="bottom" />
+  </div>
+</template>

package/src/composables/index.ts

@@ -1,2 +1 @@
-export { useUi } from "./useUi"
 export { useScrollToTop } from "./useScrollToTop"

package/src/env.d.ts

@@ -22,6 +22,11 @@ declare module "virtual:rimelight-starlight-addons-config" {
   export default config
 }
 
+declare module "virtual:rimelight-ui-docs-meta" {
+  const meta: Record<string, unknown>
+  export default meta
+}
+
 declare module "turndown" {
   class TurndownService {
     constructor(options?: Record<string, unknown>)

package/src/integrations/ui.ts

@@ -5,16 +5,12 @@ import uiPlugin from "@nuxt/ui/vite"
 import defu from "defu"
 import tailwindcss from "@tailwindcss/vite"
 import { defaultUIConfig } from "../themes"
+import type { ComponentTheme } from "../utils/defineTheme"
 
 /**
  * Shape of the `ui` config that can be passed to the integration.
  */
-export type UIConfigOverrides = {
-  "button"?: Partial<(typeof defaultUIConfig)["button"]>
-  "header"?: Partial<(typeof defaultUIConfig)["header"]>
-  "scroll-to-top"?: Partial<(typeof defaultUIConfig)["scroll-to-top"]>
-  "logo"?: Partial<(typeof defaultUIConfig)["logo"]>
-}
+export type UIConfigOverrides = Record<string, Partial<ComponentTheme>>
 
 export interface UIOptions {
   /**

package/src/nuxt-types.ts

@@ -0,0 +1,3 @@
+export type * from "@nuxt/ui/runtime/types"
+export type * from "@nuxt/ui/runtime/composables"
+export type * from "@nuxt/ui/runtime/utils"

package/src/plugins/index.ts

@@ -1,2 +1,5 @@
-export { default as starlightAddons } from "../plugins/starlightAddons"
-export type { StarlightAddonsConfig } from "../plugins/starlightAddons"
+export { default as starlightAddons } from "./starlightAddons"
+export type { StarlightAddonsConfig } from "./starlightAddons"
+
+export { default as starlightDocsApi } from "./starlightDocsApi"
+export type { StarlightDocsApiConfig } from "./starlightDocsApi"

package/src/plugins/starlightAddons/index.ts

@@ -1,34 +1,13 @@
-/// <reference path="./locals.d.ts" />
-import type { StarlightPlugin, StarlightUserConfig } from "@astrojs/starlight/types"
+import type { StarlightPlugin } from "@astrojs/starlight/types"
 import virtual from "vite-plugin-virtual"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
-import { z } from "astro/zod"
-
-import {
-  StarlightSidebarTopicsConfigSchema,
-  StarlightSidebarTopicsOptionsSchema,
-  type StarlightSidebarTopicsUserConfig,
-  type StarlightSidebarTopicsUserOptions
-} from "./libs/config"
-import { throwPluginError } from "./libs/plugin"
-import { vitePluginStarlightSidebarTopics } from "./libs/vite"
-
-export type {
-  StarlightSidebarTopicsConfig,
-  StarlightSidebarTopicsUserConfig,
-  StarlightSidebarTopicsOptions,
-  StarlightSidebarTopicsUserOptions
-} from "./libs/config"
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 export interface StarlightAddonsConfig {
   copy?: boolean
   share?: boolean
-  // Merged config for Topics
-  topics?: StarlightSidebarTopicsUserConfig
-  topicOptions?: StarlightSidebarTopicsUserOptions
 }
 
 export default function starlightAddons(userConfig?: StarlightAddonsConfig): StarlightPlugin {
@@ -40,48 +19,10 @@ export default function starlightAddons(userConfig?: StarlightAddonsConfig): Sta
 
   const addonConfig = { ...defaultAddonConfig, ...userConfig }
 
-  // 2. Validate Sidebar Topics configurations if they exist
-  const parsedTopics = StarlightSidebarTopicsConfigSchema.safeParse(addonConfig.topics || [])
-  if (!parsedTopics.success) {
-    throwPluginError(
-      `Invalid topics config: ${parsedTopics.error.issues.map((i) => i.message).join("\n")}`
-    )
-  }
-
-  const parsedOptions = StarlightSidebarTopicsOptionsSchema.safeParse(addonConfig.topicOptions)
-  if (!parsedOptions.success) {
-    throwPluginError(`Invalid topic options: ${z.prettifyError(parsedOptions.error)}`)
-  }
-
-  const topicsData = parsedTopics.data
-  const optionsData = parsedOptions.data
-
   return {
     name: "rimelight-ui-starlight-addons",
     hooks: {
-      "config:setup"({ addIntegration, updateConfig, logger, command, config: starlightConfig }) {
-        // --- Sidebar Topics Logic ---
-        if ((command === "dev" || command === "build") && topicsData.length > 0) {
-          if (starlightConfig.sidebar) {
-            throwPluginError(
-              "Sidebar detected. To use topics, move your sidebar items into the topics config."
-            )
-          }
-
-          const topicSidebar: StarlightUserConfig["sidebar"] = topicsData.map((topic, index) => {
-            return "items" in topic
-              ? { label: String(index), items: topic.items }
-              : { label: String(index), items: [] }
-          })
-
-          updateConfig({
-            sidebar: topicSidebar,
-            components: {
-              Sidebar: `starlight-sidebar-topics/overrides/Sidebar.astro`
-            }
-          })
-        }
-
+      "config:setup"({ addIntegration, updateConfig, logger }) {
         // --- Addons Logic ---
         if (!addonConfig.copy && !addonConfig.share) {
           logger.warn("StarlightAddons: No features enabled.")
@@ -104,9 +45,7 @@ export default function starlightAddons(userConfig?: StarlightAddonsConfig): Sta
                   plugins: [
                     virtual({
                       "virtual:rimelight-starlight-addons-config": `export default ${JSON.stringify(addonConfig)}`
-                    }),
-                    // Pass the validated topic data to the vite plugin
-                    vitePluginStarlightSidebarTopics(topicsData, optionsData)
+                    })
                   ]
                 }
               } as Record<string, unknown>)

package/src/plugins/starlightDocsApi/components/ApiEmits.astro

@@ -0,0 +1,46 @@
+---
+import type { ComponentMetaMap, EmitMeta } from "../types"
+import meta from "virtual:rimelight-ui-docs-meta"
+
+interface Props {
+  component: string
+}
+
+const { component } = Astro.props
+
+const allMeta = meta as unknown as ComponentMetaMap
+const compMeta = allMeta[component]
+
+const emits = compMeta?.emits ?? []
+---
+
+{emits.length === 0 ? (
+  <p class="text-sm italic text-gray-500">No events emitted by this component.</p>
+) : (
+  <div class="overflow-x-auto">
+    <table class="w-full text-sm border-collapse">
+      <thead>
+        <tr class="border-b border-gray-200 dark:border-gray-700">
+          <th class="text-left py-2 px-3 font-semibold">Event</th>
+          <th class="text-left py-2 px-3 font-semibold">Payload</th>
+        </tr>
+      </thead>
+      <tbody>
+        {emits.map((emit: EmitMeta) => (
+          <tr class="border-b border-gray-100 dark:border-gray-800">
+            <td class="py-2 px-3">
+              <code class="text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+                {emit.name}
+              </code>
+            </td>
+            <td class="py-2 px-3">
+              <code class="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded font-mono">
+                {emit.type}
+              </code>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+)}

package/src/plugins/starlightDocsApi/components/ApiProps.astro

@@ -0,0 +1,47 @@
+---
+import type { ComponentMetaMap, PropMeta } from "../types"
+import { filterProps } from "../utils"
+import meta from "virtual:rimelight-ui-docs-meta"
+
+interface Props {
+  component: string
+  hide?: string[]
+  show?: string[]
+}
+
+const { component, hide = ["class"], show } = Astro.props
+
+const allMeta = meta as unknown as ComponentMetaMap
+const compMeta = allMeta[component]
+
+const filterOpts: { hide?: string[]; show?: string[] } = { hide }
+if (show !== undefined) filterOpts.show = show
+const props = filterProps(compMeta?.props ?? [], filterOpts)
+---
+
+{props.length > 0 ? (
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Required</th>
+        <th>Default</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      {props.map((prop: PropMeta) => (
+        <tr>
+          <td><code>{prop.name}</code></td>
+          <td><code>{prop.type}</code></td>
+          <td>{prop.required ? "Yes" : "No"}</td>
+          <td>{prop.default !== undefined ? <code>{prop.default}</code> : "—"}</td>
+          <td>{prop.description || "—"}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+) : (
+  <p>No props to display.</p>
+)}

package/src/plugins/starlightDocsApi/components/ApiSlots.astro

@@ -0,0 +1,50 @@
+---
+import type { ComponentMetaMap, SlotMeta } from "../types"
+import meta from "virtual:rimelight-ui-docs-meta"
+
+interface Props {
+  component: string
+}
+
+const { component } = Astro.props
+
+const allMeta = meta as unknown as ComponentMetaMap
+const compMeta = allMeta[component]
+
+const slots = compMeta?.slots ?? []
+---
+
+{slots.length === 0 ? (
+  <p class="text-sm italic text-gray-500">No slots to display.</p>
+) : (
+  <div class="overflow-x-auto">
+    <table class="w-full text-sm border-collapse">
+      <thead>
+        <tr class="border-b border-gray-200 dark:border-gray-700">
+          <th class="text-left py-2 px-3 font-semibold">Slot</th>
+          <th class="text-left py-2 px-3 font-semibold">Type</th>
+        </tr>
+      </thead>
+      <tbody>
+        {slots.map((slot: SlotMeta) => (
+          <tr class="border-b border-gray-100 dark:border-gray-800">
+            <td class="py-2 px-3">
+              <code class="text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+                {slot.name}
+              </code>
+            </td>
+            <td class="py-2 px-3">
+              {Object.keys(slot.bindings).length > 0 ? (
+                <code class="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded font-mono">
+                  {Object.values(slot.bindings)[0]}
+                </code>
+              ) : (
+                <span class="text-gray-400">-</span>
+              )}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+)}

package/src/plugins/starlightDocsApi/components/ApiTheme.astro

@@ -0,0 +1,27 @@
+---
+import type { ComponentMetaMap } from "../types"
+import { generateThemeCode } from "../utils"
+import meta from "virtual:rimelight-ui-docs-meta"
+
+interface Props {
+  component: string
+}
+
+const { component } = Astro.props
+
+const allMeta = meta as unknown as ComponentMetaMap
+const compMeta = allMeta[component]
+
+const theme = compMeta?.theme ?? null
+const themeCode = theme ? generateThemeCode(component, theme) : null
+---
+
+{themeCode ? (
+  <div class="expressive-code">
+    <figure class="frame">
+      <pre class="language-ts overflow-x-auto"><code class="language-ts">{themeCode}</code></pre>
+    </figure>
+  </div>
+) : (
+  <p class="text-sm italic text-gray-500">No theme data available.</p>
+)}