@rimelight/ui 0.0.24 → 0.0.26

package/src/components/vue/RLVSection.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import sectionTheme from "../../themes/section.theme"
+import type { RLVButtonProps } from "./RLVButton.vue"
+import RLVIcon from "./RLVIcon.vue"
+import RLVButton from "./RLVButton.vue"
+
+const section = scv(sectionTheme)
+type SectionVariants = ComponentVariants<typeof sectionTheme>
+
+export interface RLVSectionProps {
+  as?: any
+  variant?: SectionVariants["variant"]
+  headline?: string
+  icon?: string
+  title?: string
+  description?: string
+  links?: RLVButtonProps[]
+  orientation?: SectionVariants["orientation"]
+  reverse?: boolean
+  ctaVariant?: SectionVariants["ctaVariant"]
+  ui?: ComponentSlots<typeof sectionTheme>
+  class?: any
+}
+
+const {
+  as = "div",
+  variant = "default",
+  orientation = "vertical",
+  reverse = false,
+  ctaVariant = "solid",
+  ui: uiProp,
+  class: className,
+  headline,
+  title,
+  description,
+  links
+} = defineProps<RLVSectionProps>()
+
+const slots = useSlots()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    section,
+    {
+      variant,
+      orientation,
+      reverse,
+      ...(variant === "cta" && { ctaVariant }),
+      headline: !!(slots.headline || headline),
+      title: !!(slots.title || title),
+      description: !!(slots.description || description),
+      body: !!slots.body
+    },
+    useUi("section", uiProp),
+    className
+  )
+)
+</script>
+
+<template>
+  <component
+    :is="as"
+    data-slot="root"
+    :data-orientation="orientation"
+    :class="[resolvedClasses.root]"
+    v-bind="$attrs"
+  >
+    <slot v-if="$slots.background" name="background">
+      <div :class="resolvedClasses.background" data-slot="background">
+        <slot name="background" />
+      </div>
+    </slot>
+
+    <slot name="top" />
+
+    <div data-slot="container" :class="resolvedClasses.container">
+      <div
+        v-if="
+          $slots.header ||
+          icon ||
+          headline ||
+          title ||
+          description ||
+          $slots.body ||
+          $slots.footer ||
+          $slots.links ||
+          links?.length
+        "
+        data-slot="wrapper"
+        :class="resolvedClasses.wrapper"
+      >
+        <div
+          v-if="$slots.header || icon || headline || title || description"
+          data-slot="header"
+          :class="resolvedClasses.header"
+        >
+          <slot name="header">
+            <div v-if="icon || $slots.leading" data-slot="leading" :class="resolvedClasses.leading">
+              <slot name="leading" :ui="resolvedClasses">
+                <RLVIcon
+                  v-if="icon"
+                  :name="icon"
+                  size="md"
+                  :ui="{ root: resolvedClasses.leadingIcon }"
+                />
+              </slot>
+            </div>
+
+            <div v-if="headline" data-slot="headline" :class="resolvedClasses.headline">
+              <slot name="headline">
+                {{ headline }}
+              </slot>
+            </div>
+
+            <component
+              :is="variant === 'hero' ? 'h1' : 'h2'"
+              v-if="title"
+              data-slot="title"
+              :class="resolvedClasses.title"
+            >
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </component>
+
+            <div v-if="description" data-slot="description" :class="resolvedClasses.description">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </div>
+          </slot>
+        </div>
+
+        <div v-if="$slots.body" data-slot="body" :class="resolvedClasses.body">
+          <slot name="body" />
+        </div>
+
+        <div
+          v-if="$slots.footer || $slots.links || links?.length"
+          data-slot="footer"
+          :class="resolvedClasses.footer"
+        >
+          <slot name="footer">
+            <div
+              v-if="links?.length || $slots.links"
+              data-slot="links"
+              :class="resolvedClasses.links"
+            >
+              <RLVButton v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
+              <slot name="links" />
+            </div>
+          </slot>
+        </div>
+      </div>
+
+      <slot v-if="$slots.default" />
+      <div v-else-if="orientation === 'horizontal'" class="hidden lg:block" />
+    </div>
+
+    <slot name="bottom" />
+  </component>
+</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/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>
+)}