@rimelight/ui 0.0.5 → 0.0.7

package/src/components/astro/RLAButton.astro

@@ -1,84 +1,74 @@
 ---
-import type { HTMLAttributes } from "astro/types";
-import { cv, cx } from "css-variants";
-import { twMerge } from "tailwind-merge";
-import defu from "defu";
-import { buttonTheme } from "../../themes/button.theme";
-import { getUIConfig } from "virtual:rimelight-ui";
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { buttonTheme } from "@/themes/button.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
 
-// Create the variant resolver with tailwind-merge for conflict resolution
-const button = cv({
-  ...buttonTheme,
+const button = scv({
+  slots: [...buttonTheme.slots],
+  base: buttonTheme.base,
+  variants: buttonTheme.variants,
+  compoundVariants: [...buttonTheme.compoundVariants],
+  defaultVariants: buttonTheme.defaultVariants,
   classNameResolver: (...args) => twMerge(cx(...args)),
 });
 
-/**
- * UI prop interface for overriding the base class.
- * For multi-slot components (scv), this would have keys per slot.
- */
-export interface RLAButtonUI {
-  base?: string;
-}
-
-/**
- * Button props — uses indexed access types on the theme config
- * (same pattern as Nuxt UI's Button['variants']['color'])
- */
 export interface RLAButtonProps {
   /**
    * Button variant style.
-   * @default "default"
+   * @default "solid"
    */
   variant?: keyof typeof buttonTheme.variants.variant;
+  /**
+   * Button color.
+   * @default "primary"
+   */
+  color?: keyof typeof buttonTheme.variants.color;
   /**
    * Button size.
    * @default "md"
    */
   size?: keyof typeof buttonTheme.variants.size;
   /**
-   * Per-instance UI override. Merged with global config via `defu`.
-   * Higher priority than integration-level config.
+   * When provided, renders as <a> instead of <button>.
    */
-  ui?: RLAButtonUI;
+  href?: string;
   /**
-   * External class — applied after all internal classes.
+   * UI overrides for individual slots, derived from the button theme.
    */
-  class?: string;
+  ui?: Partial<Record<keyof typeof buttonTheme.base, string>>;
   /**
-   * When provided, renders as <a> instead of <button>.
+   * External class — applied to the root element.
    */
-  href?: string;
+  class?: string;
   /**
    * Standard HTML attributes for <button>
    */
   [key: string]: unknown;
 }
 
-type Props = RLAButtonProps;
-
 const {
-  variant,
-  size,
+  variant = "solid",
+  color = "primary",
+  size = "md",
   class: className,
   ui: uiProp,
   href,
   ...rest
-} = Astro.props;
+} = Astro.props as RLAButtonProps
 
-// Get global config from the virtual module (populated by the Astro integration)
 const globalConfig = getUIConfig();
 
-// Merge: uiProp > globalConfig.button (uiProp wins)
-const mergedUI = defu<Record<string, unknown>[], [Record<string, unknown>]>(
+const mergedUI = defu(
   uiProp ?? {},
   (globalConfig.button as Record<string, unknown>) ?? {},
-);
+) as Record<keyof typeof buttonTheme.base, string | undefined>;
 
-// Resolve classes: cv() returns a string, className prop merges overrides
-const classes = button({
+const { root } = button({
   variant,
+  color,
   size,
-  className: mergedUI.base as string | undefined,
 });
 
 // Determine whether to render <a> or <button>
@@ -86,7 +76,7 @@ const Tag = href ? "a" : "button";
 ---
 
 <Tag
-  class:list={[classes, className]}
+  class={twMerge(root, mergedUI.root, className)}
   data-slot="rla-button"
   {...(Tag === "a" ? { href } : {})}
   {...rest}

package/src/components/astro/RLAHeader.astro

@@ -0,0 +1,75 @@
+---
+import { scv, cx } from "css-variants";
+import { twMerge } from "tailwind-merge";
+import defu from "defu";
+import { headerTheme } from "@/themes/header.theme.ts";
+import { getUIConfig } from "virtual:rimelight-ui";
+
+const header = scv({
+  slots: [...headerTheme.slots],
+  base: headerTheme.base,
+  variants: headerTheme.variants,
+  defaultVariants: headerTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args)),
+});
+
+export interface RLAHeaderProps {
+  /**
+   * Whether to contain the header content in a max-width container.
+   * @default true
+   */
+  contain?: boolean;
+  /**
+   * Whether the header should be sticky at the top.
+   * @default true
+   */
+  sticky?: boolean;
+  /**
+   * UI overrides for individual slots, derived from the header theme.
+   */
+  ui?: Partial<Record<keyof typeof headerTheme.base, string>>;
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string;
+  /**
+   * Standard HTML attributes for <header>
+   */
+  [key: string]: unknown;
+}
+
+const {
+  contain = true,
+  sticky = true,
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAHeaderProps
+
+const globalConfig = getUIConfig();
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.header as Record<string, unknown>) ?? {},
+) as Record<keyof typeof headerTheme.base, string | undefined>;
+
+const { root, container, left, center, right } = header({ contain, sticky });
+---
+
+<header
+  class:list={[twMerge(root, mergedUI.root, className)]}
+  data-slot="rla-header"
+  {...rest}
+>
+  <div class:list={[twMerge(container, mergedUI.container)]}>
+    <div class:list={[twMerge(left, mergedUI.left)]} data-slot="header-left">
+      <slot name="left" />
+    </div>
+    <div class:list={[twMerge(center, mergedUI.center)]} data-slot="header-center">
+      <slot name="center" />
+    </div>
+    <div class:list={[twMerge(right, mergedUI.right)]} data-slot="header-right">
+      <slot name="right" />
+    </div>
+  </div>
+</header>

package/src/components/nuxt/index.ts

@@ -0,0 +1 @@
+export * from "@nuxt/ui"

package/src/components/vue/RLVButton.vue

@@ -1,26 +1,32 @@
 <script setup lang="ts">
-import { computed } from "vue"
-import { cv, cx } from "css-variants"
+import { scv, cx } from "css-variants"
 import { twMerge } from "tailwind-merge"
-import { buttonTheme } from "../../themes/button.theme"
+import defu from "defu"
+import { buttonTheme } from "@/themes/button.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
 
-// Create the variant resolver with tailwind-merge for conflict resolution
-const button = cv({
-  ...buttonTheme,
+const button = scv({
+  slots: [...buttonTheme.slots],
+  base: buttonTheme.base,
+  variants: buttonTheme.variants,
+  compoundVariants: [...buttonTheme.compoundVariants],
+  defaultVariants: buttonTheme.defaultVariants,
   classNameResolver: (...args) => twMerge(cx(...args))
 })
 
-/**
- * Button props — uses indexed access types on the theme config (same pattern as Nuxt UI's
- * Button['variants']['color'])
- */
 export interface RLVButtonProps {
   /**
-   * Button variant style.
+   * Button variant.
    *
-   * @default "default"
+   * @default "solid"
    */
   variant?: keyof typeof buttonTheme.variants.variant
+  /**
+   * Button color.
+   *
+   * @default "primary"
+   */
+  color?: keyof typeof buttonTheme.variants.color
   /**
    * Button size.
    *
@@ -28,49 +34,56 @@ export interface RLVButtonProps {
    */
   size?: keyof typeof buttonTheme.variants.size
   /**
-   * Per-instance UI override for the base class string. Merged with variant/size classes via
-   * css-variants.
+   * When provided, renders as <a> instead of <button>.
+   */
+  href?: string
+  /**
+   * UI overrides for individual slots, derived from the button theme.
    */
-  ui?: { base?: string }
+  ui?: Partial<Record<keyof typeof buttonTheme.base, string>>
   /**
-   * External class — applied after all internal classes.
+   * External class — applied to the root element.
    */
   class?: string
   /**
-   * When provided, renders as <a> instead of <button>.
+   * Standard HTML attributes for <button>
    */
-  href?: string
+  [key: string]: unknown
 }
 
-const props = withDefaults(defineProps<RLVButtonProps>(), {
-  variant: "default",
-  size: "md",
-  class: undefined,
-  ui: undefined,
-  href: undefined
-})
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  class: className,
+  ui: uiProp,
+  href
+} = defineProps<RLVButtonProps>()
+
+const globalConfig = getUIConfig()
 
-// Resolve classes — exactly like Astro: cv() with className param
-const resolvedClasses = computed(() => {
-  const classes = button({
-    variant: props.variant,
-    size: props.size,
-    className: props.ui?.base
-  })
-  return classes
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.button as Record<string, unknown>) ?? {}
+) as Record<keyof typeof buttonTheme.base, string | undefined>
+
+const { root } = button({
+  variant,
+  color,
+  size
 })
 
 // Determine whether to render <a> or <button>
-const tag = computed(() => (props.href ? "a" : "button"))
+const Tag = href ? "a" : "button"
 </script>
 
 <template>
   <component
-    :is="tag"
+    v-bind="$attrs"
+    :is="Tag"
     :href="href"
-    :class="[resolvedClasses, props.class]"
+    :class="twMerge(root, mergedUI.root, className)"
     data-slot="rlv-button"
-    v-bind="$attrs"
   >
     <slot />
   </component>

package/src/components/vue/RLVHeader.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import { useUi } from "../../composables"
+import { headerTheme } from "@/themes/header.theme.ts"
+
+const header = scv({
+  slots: [...headerTheme.slots],
+  base: headerTheme.base,
+  variants: headerTheme.variants,
+  defaultVariants: headerTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVHeaderProps {
+  /**
+   * Whether to contain the header content in a max-width container.
+   *
+   * @default true
+   */
+  contain?: boolean
+  /**
+   * Whether the header should be sticky at the top.
+   *
+   * @default true
+   */
+  sticky?: boolean
+  /**
+   * UI overrides for individual slots, derived from the header theme.
+   */
+  ui?: Partial<Record<keyof typeof headerTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+}
+
+const {
+  contain = true,
+  sticky = true,
+  class: className,
+  ui: uiProp
+} = defineProps<RLVHeaderProps>()
+
+const mergedUI = useUi("header", uiProp as Record<string, unknown> | undefined)
+
+const resolvedClasses = computed(() => {
+  const classes = header({
+    contain,
+    sticky
+  })
+
+  return {
+    root: twMerge(classes.root, mergedUI.value.root as string | undefined),
+    container: twMerge(classes.container, mergedUI.value.container as string | undefined),
+    left: twMerge(classes.left, mergedUI.value.left as string | undefined),
+    center: twMerge(classes.center, mergedUI.value.center as string | undefined),
+    right: twMerge(classes.right, mergedUI.value.right as string | undefined)
+  }
+})
+</script>
+
+<template>
+  <header :class="[resolvedClasses.root, className]" data-slot="rlv-header" v-bind="$attrs">
+    <div :class="resolvedClasses.container">
+      <div :class="resolvedClasses.left" data-slot="header-left">
+        <slot name="left" />
+      </div>
+      <div :class="resolvedClasses.center" data-slot="header-center">
+        <slot name="center" />
+      </div>
+      <div :class="resolvedClasses.right" data-slot="header-right">
+        <slot name="right" />
+      </div>
+    </div>
+  </header>
+</template>

package/src/composables/index.ts

@@ -1 +1 @@
-export { useComponentUI } from "./useComponentUI"
+export { useUi } from "./useUi"

package/src/composables/{useComponentUI.ts → useUi.ts}

@@ -1,7 +1,7 @@
 import { computed, type ComputedRef } from "vue"
 import defu from "defu"
 import { getUIConfig } from "virtual:rimelight-ui"
-import type { DefaultUIConfig } from "../themes"
+import type { DefaultUIConfig } from "@/themes"
 
 /**
  * Reactive UI config merge composable for Vue components.
@@ -13,8 +13,8 @@ import type { DefaultUIConfig } from "../themes"
  * @param uiProp - The local `ui` prop from defineProps
  * @returns ComputedRef of merged UI overrides
  */
-export function useComponentUI<T extends keyof DefaultUIConfig>(
-  componentName: T,
+export function useUi(
+  componentName: keyof DefaultUIConfig,
   uiProp: Record<string, unknown> | undefined
 ): ComputedRef<Record<string, unknown>> {
   const globalConfig = getUIConfig()

package/src/config/index.ts

@@ -1,3 +1 @@
 export * from "./site.config"
-export * from "./links"
-export * from "./cookies"

package/src/config/site.config.ts

@@ -22,6 +22,6 @@ export interface SiteConfig {
     titleTemplate: string
     ogImageFallback: string
     maxDescriptionLength: number
-    authorHandle?: string // e.g., @danielmarchi
+    authorHandle?: string
   }
 }

package/src/env.d.ts

@@ -1,16 +1,13 @@
-/// <reference types="astro/client" />
-
-declare module "virtual:rimelight-ui" {
-  import type { DefaultUIConfig } from "../themes"
-
-  export function getUIConfig(): DefaultUIConfig
-}
-
-declare namespace App {
-  interface Locals {
-    uiLocale?: string
-    translationLocale?: string
-    isMissingContent?: boolean
-    cfContext?: Record<string, unknown>
-  }
-}
+/// <reference types="astro/client" />
+
+declare module "virtual:rimelight-ui" {
+  import type { DefaultUIConfig } from "../themes"
+
+  export function getUIConfig(): DefaultUIConfig
+}
+
+declare namespace App {
+  interface Locals {
+    cfContext?: Record<string, unknown>
+  }
+}

package/src/integrations/ui.ts

@@ -1,81 +1,106 @@
-import type { AstroIntegration } from "astro"
-import defu from "defu"
-import { defaultUIConfig } from "../themes"
-
-/**
- * Shape of the `ui` config that can be passed to the integration. Keys are component names, values
- * are partial theme configs.
- */
-export type UIConfigOverrides = {
-  button?: Partial<(typeof defaultUIConfig)["button"]>
-}
-
-export interface UIOptions {
-  /**
-   * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
-   * wins).
-   */
-  ui?: UIConfigOverrides
-}
-
-/**
- * Astro integration for `@rimelight/ui`.
- *
- * Provides global UI configuration via a virtual module. Components import `virtual:rimelight-ui`
- * to access the merged config.
- *
- * @example
- *   // astro.config.mjs
- *   import { ui } from "@rimelight/ui/integrations"
- *
- *   export default defineConfig({
- *     integrations: [
- *       ui({
- *         ui: {
- *           button: {
- *             defaultVariants: { variant: "primary" }
- *           }
- *         }
- *       })
- *     ]
- *   })
- */
-export function ui(options: UIOptions = {}): AstroIntegration {
-  // Merge user overrides with defaults (user-provided values win)
-  const resolvedConfig = defu(options.ui ?? {}, defaultUIConfig)
-
-  const virtualModuleId = "virtual:rimelight-ui"
-  const resolvedVirtualModuleId = "\0" + virtualModuleId
-
-  return {
-    name: "@rimelight/ui",
-    hooks: {
-      "astro:config:setup": ({ updateConfig, logger }) => {
-        logger.info("Initializing @rimelight/ui configuration")
-
-        updateConfig({
-          vite: {
-            plugins: [
-              {
-                name: "vite-plugin-rimelight-ui-config",
-                enforce: "pre",
-                resolveId(id: string) {
-                  if (id === virtualModuleId) {
-                    return resolvedVirtualModuleId
-                  }
-                  return null
-                },
-                load(id: string) {
-                  if (id === resolvedVirtualModuleId) {
-                    return `export const getUIConfig = () => (${JSON.stringify(resolvedConfig)});`
-                  }
-                  return null
-                }
-              }
-            ]
-          }
-        })
-      }
-    }
-  }
-}
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import type { AstroIntegration } from "astro"
+import vue from "@astrojs/vue"
+import uiPlugin from "@nuxt/ui/vite"
+import defu from "defu"
+import Icons from "unplugin-icons/vite"
+import { defaultUIConfig } from "../themes"
+
+const nuxtUIEntry = fileURLToPath(import.meta.resolve("@nuxt/ui"))
+const nuxtUIComponentsPath = path.join(path.dirname(nuxtUIEntry), "runtime/components")
+
+/**
+ * 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"]>
+}
+
+export interface UIOptions {
+  /**
+   * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
+   * wins).
+   */
+  ui?: UIConfigOverrides
+}
+
+/**
+ * Astro integration for `@rimelight/ui`.
+ *
+ * Provides global UI configuration via a virtual module. Components import `virtual:rimelight-ui`
+ * to access the merged config.
+ *
+ * @example
+ *   // astro.config.mjs
+ *   import { ui } from "@rimelight/ui/integrations"
+ *
+ *   export default defineConfig({
+ *     integrations: [
+ *       ui({
+ *         ui: {
+ *           button: {
+ *             defaultVariants: { variant: "primary" }
+ *           }
+ *         }
+ *       })
+ *     ]
+ *   })
+ */
+export function ui(options: UIOptions = {}): AstroIntegration[] {
+  const resolvedConfig = defu(options.ui ?? {}, defaultUIConfig)
+
+  const virtualModuleId = "virtual:rimelight-ui"
+  const resolvedVirtualModuleId = "\0" + virtualModuleId
+
+  const rimelightUIIntegration: AstroIntegration = {
+    name: "@rimelight/ui",
+    hooks: {
+      "astro:config:setup": ({ updateConfig, logger }) => {
+        logger.info("Initializing @rimelight/ui core")
+
+        updateConfig({
+          vite: {
+            resolve: {
+              alias: {
+                "@rimelight/ui/components/nuxt/": `${nuxtUIComponentsPath}/`
+              }
+            },
+            plugins: [
+              uiPlugin({
+                router: false,
+                scanPackages: ["@rimelight/ui"]
+              }),
+              Icons({
+                compiler: "astro",
+                autoInstall: true
+              }),
+              {
+                name: "vite-plugin-rimelight-ui-config",
+                enforce: "pre",
+                resolveId(id: string) {
+                  if (id === virtualModuleId) return resolvedVirtualModuleId
+                  return null
+                },
+                load(id: string) {
+                  if (id === resolvedVirtualModuleId) {
+                    return `export const getUIConfig = () => (${JSON.stringify(resolvedConfig)});`
+                  }
+                  return null
+                }
+              }
+            ]
+          }
+        })
+      }
+    }
+  }
+
+  return [
+    vue({
+      appEntrypoint: "@rimelight/ui/integrations/vue-entrypoint"
+    }),
+    rimelightUIIntegration
+  ]
+}

package/src/integrations/vue-entrypoint.ts

@@ -0,0 +1,6 @@
+import type { App } from "vue"
+import ui from "@nuxt/ui/vue-plugin"
+
+export default (app: App) => {
+  app.use(ui)
+}