@rimelight/ui 0.0.5 → 0.0.6

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/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,7 +13,7 @@ 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>(
+export function useUi<T extends keyof DefaultUIConfig>(
   componentName: T,
   uiProp: Record<string, unknown> | undefined
 ): ComputedRef<Record<string, unknown>> {

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/integrations/ui.ts

@@ -1,5 +1,6 @@
 import type { AstroIntegration } from "astro"
 import defu from "defu"
+import Icons from "unplugin-icons/vite"
 import { defaultUIConfig } from "../themes"
 
 /**
@@ -8,6 +9,7 @@ import { defaultUIConfig } from "../themes"
  */
 export type UIConfigOverrides = {
   button?: Partial<(typeof defaultUIConfig)["button"]>
+  header?: Partial<(typeof defaultUIConfig)["header"]>
 }
 
 export interface UIOptions {
@@ -56,6 +58,10 @@ export function ui(options: UIOptions = {}): AstroIntegration {
         updateConfig({
           vite: {
             plugins: [
+              Icons({
+                compiler: "astro",
+                autoInstall: true
+              }),
               {
                 name: "vite-plugin-rimelight-ui-config",
                 enforce: "pre",