@rimelight/ui 0.0.4 → 0.0.6

package/src/components/astro/RLAButton.astro

@@ -0,0 +1,85 @@
+---
+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"
+
+const button = scv({
+  slots: [...buttonTheme.slots],
+  base: buttonTheme.base,
+  variants: buttonTheme.variants,
+  compoundVariants: [...buttonTheme.compoundVariants],
+  defaultVariants: buttonTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args)),
+});
+
+export interface RLAButtonProps {
+  /**
+   * Button variant style.
+   * @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;
+  /**
+   * When provided, renders as <a> instead of <button>.
+   */
+  href?: string;
+  /**
+   * UI overrides for individual slots, derived from the button theme.
+   */
+  ui?: Partial<Record<keyof typeof buttonTheme.base, string>>;
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string;
+  /**
+   * Standard HTML attributes for <button>
+   */
+  [key: string]: unknown;
+}
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  class: className,
+  ui: uiProp,
+  href,
+  ...rest
+} = Astro.props as RLAButtonProps
+
+const globalConfig = getUIConfig();
+
+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 = href ? "a" : "button";
+---
+
+<Tag
+  class={twMerge(root, mergedUI.root, className)}
+  data-slot="rla-button"
+  {...(Tag === "a" ? { href } : {})}
+  {...rest}
+>
+  <slot />
+</Tag>

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

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+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"
+
+const button = scv({
+  slots: [...buttonTheme.slots],
+  base: buttonTheme.base,
+  variants: buttonTheme.variants,
+  compoundVariants: [...buttonTheme.compoundVariants],
+  defaultVariants: buttonTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVButtonProps {
+  /**
+   * Button variant.
+   *
+   * @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
+  /**
+   * When provided, renders as <a> instead of <button>.
+   */
+  href?: string
+  /**
+   * UI overrides for individual slots, derived from the button theme.
+   */
+  ui?: Partial<Record<keyof typeof buttonTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+  /**
+   * Standard HTML attributes for <button>
+   */
+  [key: string]: unknown
+}
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  class: className,
+  ui: uiProp,
+  href
+} = defineProps<RLVButtonProps>()
+
+const globalConfig = getUIConfig()
+
+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 = href ? "a" : "button"
+</script>
+
+<template>
+  <component
+    v-bind="$attrs"
+    :is="Tag"
+    :href="href"
+    :class="twMerge(root, mergedUI.root, className)"
+    data-slot="rlv-button"
+  >
+    <slot />
+  </component>
+</template>

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

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

package/src/composables/useUi.ts

@@ -0,0 +1,27 @@
+import { computed, type ComputedRef } from "vue"
+import defu from "defu"
+import { getUIConfig } from "virtual:rimelight-ui"
+import type { DefaultUIConfig } from "@/themes"
+
+/**
+ * Reactive UI config merge composable for Vue components.
+ *
+ * Merges (highest priority first): 1. Local `ui` prop override 2. Global config from integration
+ * (virtual:rimelight-ui)
+ *
+ * @param componentName - The component key in the config (e.g. 'button')
+ * @param uiProp - The local `ui` prop from defineProps
+ * @returns ComputedRef of merged UI overrides
+ */
+export function useUi<T extends keyof DefaultUIConfig>(
+  componentName: T,
+  uiProp: Record<string, unknown> | undefined
+): ComputedRef<Record<string, unknown>> {
+  const globalConfig = getUIConfig()
+
+  return computed(() => {
+    const componentConfig = globalConfig[componentName]
+
+    return defu(uiProp ?? {}, componentConfig ?? {})
+  })
+}

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,49 +1,16 @@
 /// <reference types="astro/client" />
 
-interface ImportMetaEnv {
-  readonly PROD: boolean
-  readonly DEV: boolean
-  // add other env vars here...
-}
+declare module "virtual:rimelight-ui" {
+  import type { DefaultUIConfig } from "../themes"
 
-interface ImportMeta {
-  readonly env: ImportMetaEnv
+  export function getUIConfig(): DefaultUIConfig
 }
 
-import type { Locale } from "./domain/i18n/schema"
-
-declare global {
-  namespace App {
-    interface Locals {
-      uiLocale: Locale
-      translationLocale: Locale
-      cfContext: any
-      isMissingContent?: boolean
-    }
-  }
-
-  declare module "astro:content" {
-    export interface CollectionEntry<T extends string = any> {
-      id: string
-      data: any
-      slug: string
-      body: string
-      collection: T
-    }
-    export const getCollection: (
-      collection: string,
-      filter?: (entry: CollectionEntry) => boolean
-    ) => Promise<CollectionEntry[]>
-    export const getEntry: (collection: string, id: string) => Promise<CollectionEntry>
-  }
-
-  declare module "cloudflare:workers" {
-    export const env: Env
-  }
-
-  declare module "~icons/*" {
-    import type { AstroComponentFactory } from "astro/runtime/server/index.js"
-    const component: AstroComponentFactory
-    export default component
+declare namespace App {
+  interface Locals {
+    uiLocale?: string
+    translationLocale?: string
+    isMissingContent?: boolean
+    cfContext?: Record<string, unknown>
   }
 }

package/src/integrations/index.ts

@@ -1 +1,3 @@
 export * from "./sri"
+export { ui } from "./ui"
+export type { UIOptions, UIConfigOverrides } from "./ui"

package/src/integrations/ui.ts

@@ -0,0 +1,87 @@
+import type { AstroIntegration } from "astro"
+import defu from "defu"
+import Icons from "unplugin-icons/vite"
+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"]>
+  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 {
+  // 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: [
+              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
+                }
+              }
+            ]
+          }
+        })
+      }
+    }
+  }
+}