@rimelight/ui 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Rimelight UI Library.",
   "license": "MIT",
   "author": "Daniel Marchi",
@@ -13,7 +13,14 @@
   ],
   "type": "module",
   "exports": {
+    ".": "./src/integrations/index.ts",
     "./components/*": "./src/components/*",
+    "./components/astro/*": "./src/components/astro/*",
+    "./components/vue/*": "./src/components/vue/*",
+    "./themes": "./src/themes/index.ts",
+    "./themes/*": "./src/themes/*",
+    "./composables": "./src/composables/index.ts",
+    "./composables/*": "./src/composables/*",
     "./config": "./src/config/index.ts",
     "./config/*": "./src/config/*",
     "./domain": "./src/domain/index.ts",
@@ -33,17 +40,31 @@
   },
   "dependencies": {
     "css-variants": "2.3.5",
-    "embla-carousel": "8.6.0"
+    "defu": "6.1.6",
+    "embla-carousel": "8.6.0",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.8",
+    "@astrojs/ts-plugin": "1.10.7",
+    "@e18e/eslint-plugin": "0.3.0",
     "@types/node": "25.5.2",
+    "@unocss/eslint-plugin": "66.6.7",
     "astro": "6.1.4",
+    "eslint-plugin-regexp": "3.1.0",
     "typescript": "6.0.2",
+    "unocss": "66.6.7",
+    "unplugin-icons": "23.0.1",
     "vite-plus": "0.1.15"
   },
   "peerDependencies": {
-    "astro": ">=6.0.0"
+    "astro": ">=6.0.0",
+    "vue": ">=3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
   },
   "scripts": {
     "generate:config": "vp config",

package/src/components/astro/RLAButton.astro

@@ -0,0 +1,95 @@
+---
+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";
+
+// Create the variant resolver with tailwind-merge for conflict resolution
+const button = cv({
+  ...buttonTheme,
+  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"
+   */
+  variant?: keyof typeof buttonTheme.variants.variant;
+  /**
+   * 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.
+   */
+  ui?: RLAButtonUI;
+  /**
+   * External class — applied after all internal classes.
+   */
+  class?: string;
+  /**
+   * When provided, renders as <a> instead of <button>.
+   */
+  href?: string;
+  /**
+   * Standard HTML attributes for <button>
+   */
+  [key: string]: unknown;
+}
+
+type Props = RLAButtonProps;
+
+const {
+  variant,
+  size,
+  class: className,
+  ui: uiProp,
+  href,
+  ...rest
+} = Astro.props;
+
+// 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>]>(
+  uiProp ?? {},
+  (globalConfig.button as Record<string, unknown>) ?? {},
+);
+
+// Resolve classes: cv() returns a string, className prop merges overrides
+const classes = button({
+  variant,
+  size,
+  className: mergedUI.base as string | undefined,
+});
+
+// Determine whether to render <a> or <button>
+const Tag = href ? "a" : "button";
+---
+
+<Tag
+  class:list={[classes, className]}
+  data-slot="rla-button"
+  {...(Tag === "a" ? { href } : {})}
+  {...rest}
+>
+  <slot />
+</Tag>

package/src/components/vue/RLVButton.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { cv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import { buttonTheme } from "../../themes/button.theme"
+
+// Create the variant resolver with tailwind-merge for conflict resolution
+const button = cv({
+  ...buttonTheme,
+  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.
+   *
+   * @default "default"
+   */
+  variant?: keyof typeof buttonTheme.variants.variant
+  /**
+   * Button size.
+   *
+   * @default "md"
+   */
+  size?: keyof typeof buttonTheme.variants.size
+  /**
+   * Per-instance UI override for the base class string. Merged with variant/size classes via
+   * css-variants.
+   */
+  ui?: { base?: string }
+  /**
+   * External class — applied after all internal classes.
+   */
+  class?: string
+  /**
+   * When provided, renders as <a> instead of <button>.
+   */
+  href?: string
+}
+
+const props = withDefaults(defineProps<RLVButtonProps>(), {
+  variant: "default",
+  size: "md",
+  class: undefined,
+  ui: undefined,
+  href: undefined
+})
+
+// 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
+})
+
+// Determine whether to render <a> or <button>
+const tag = computed(() => (props.href ? "a" : "button"))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :href="href"
+    :class="[resolvedClasses, props.class]"
+    data-slot="rlv-button"
+    v-bind="$attrs"
+  >
+    <slot />
+  </component>
+</template>

package/src/composables/index.ts

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

package/src/composables/useComponentUI.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 useComponentUI<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/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,81 @@
+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
+                }
+              }
+            ]
+          }
+        })
+      }
+    }
+  }
+}

package/src/themes/button.theme.ts

@@ -0,0 +1,45 @@
+import type { ClassValue } from "css-variants"
+
+/**
+ * Shared button theme configuration. Used by both RLAButton (Astro) and RLVButton (Vue) components.
+ */
+export const buttonTheme = {
+  base: [
+    "inline-flex items-center justify-center gap-4xs rounded-md font-medium ws-nowrap",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "transition-all outline-none focus-visible:ring-3",
+    "disabled:pointer-events-none disabled:op-50",
+    "aria-invalid:border-error aria-invalid:focus-visible:ring-error/40"
+  ] satisfies ClassValue,
+  variants: {
+    variant: {
+      default: "bg-foreground text-background hover:bg-foreground/90 focus-visible:ring-outline/50",
+      primary:
+        "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary/50",
+      secondary:
+        "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus-visible:ring-secondary/50",
+      outline:
+        "dark:border-input focus-visible:ring-outline/50 bg-background dark:bg-input/30 focus-visible:border-outline hover:bg-muted dark:hover:bg-input/50 hover:text-foreground b shadow-xs",
+      ghost: "hover:bg-muted hover:text-foreground focus-visible:ring-outline/50",
+      info: "bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/50",
+      success:
+        "bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/50",
+      warning:
+        "bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/50",
+      error: "bg-error text-error-foreground hover:bg-error/90 focus-visible:ring-error/50"
+    },
+    size: {
+      "xs": "px-xs py-2xs text-xs has-[>svg]:px-xs [&_svg:not([class*='size-'])]:size-xs",
+      "sm": "px-sm py-3xs text-sm has-[>svg]:px-sm [&_svg:not([class*='size-'])]:size-sm",
+      "md": "px-md py-2xs text-md has-[>svg]:px-md [&_svg:not([class*='size-'])]:size-md",
+      "lg": "px-lg py-xs text-lg has-[>svg]:px-lg [&_svg:not([class*='size-'])]:size-lg",
+      "xl": "px-xl py-sm text-xl has-[>svg]:px-xl [&_svg:not([class*='size-'])]:size-xl",
+      "icon": "size-10 p-0",
+      "icon-sm": "size-8 p-0"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+} as const

package/src/themes/index.ts

@@ -0,0 +1,11 @@
+import { buttonTheme } from "./button.theme"
+
+/**
+ * Default UI configuration for all components. This is the baseline that gets merged with
+ * user-provided overrides via the Astro integration options.
+ */
+export const defaultUIConfig = {
+  button: buttonTheme
+} as const
+
+export type DefaultUIConfig = typeof defaultUIConfig