@rimelight/ui 0.0.23 → 0.0.25

package/src/components/vue/RLVButton.vue

@@ -1,53 +1,71 @@
 <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"
+import { computed, useSlots } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants } from "../../types"
+import buttonTheme from "../../themes/button.theme"
 
-const button = scv({
-  slots: [...buttonTheme.slots],
-  base: buttonTheme.base,
-  variants: buttonTheme.variants,
-  compoundVariants: [...buttonTheme.compoundVariants],
-  defaultVariants: buttonTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
+const button = scv(buttonTheme)
+type ButtonVariants = ComponentVariants<typeof buttonTheme>
 
 export interface RLVButtonProps {
   /**
-   * Button variant.
-   *
-   * @default "solid"
+   * The visual style variant of the button
    */
-  variant?: keyof typeof buttonTheme.variants.variant
+  variant?: ButtonVariants["variant"]
   /**
-   * Button color.
-   *
-   * @default "primary"
+   * The color scheme applied to the button
    */
-  color?: keyof typeof buttonTheme.variants.color
+  color?: ButtonVariants["color"]
   /**
-   * Button size.
-   *
-   * @default "md"
+   * The size scale of the button
    */
-  size?: keyof typeof buttonTheme.variants.size
+  size?: ButtonVariants["size"]
   /**
-   * When provided, renders as <a> instead of <button>.
+   * When provided, renders the button as an anchor link
    */
   href?: string
   /**
-   * UI overrides for individual slots, derived from the button theme.
+   * The text label displayed inside the button
    */
-  ui?: Partial<Record<keyof typeof buttonTheme.base, string>>
+  label?: string
   /**
-   * External class — applied to the root element.
+   * Icon name displayed before the label
    */
-  class?: string
+  leadingIcon?: string
+  /**
+   * Icon name displayed after the label
+   */
+  trailingIcon?: string
+  /**
+   * Shows a loading spinner animation
+   */
+  loading?: boolean
+  /**
+   * Renders a square button with equal padding
+   */
+  square?: boolean
+  /**
+   * Makes the button stretch to full width
+   */
+  block?: boolean
+  /**
+   * Applies active state styling
+   */
+  active?: boolean
+  /**
+   * Color used when button is in active state
+   */
+  activeColor?: ButtonVariants["color"]
+  /**
+   * Variant used when button is in active state
+   */
+  activeVariant?: ButtonVariants["variant"]
   /**
-   * Standard HTML attributes for <button>
+   * Component-specific CSS class overrides
    */
+  ui?: Partial<Record<string, string>>
+  class?: string
   [key: string]: unknown
 }
 
@@ -57,30 +75,68 @@ const {
   size = "md",
   class: className,
   ui: uiProp,
-  href
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant
 } = defineProps<RLVButtonProps>()
 
-defineSlots<{
-  /**
-   * The default slot for the button content (e.g., text, icons).
-   */
-  default(props: {}): any
-}>()
+const slots = useSlots()
+
+const isLeading = computed(() => !!(leadingIcon || slots.leading) || loading)
+const isTrailing = computed(
+  () => !!(trailingIcon || slots.trailing) || (loading && !isLeading.value)
+)
+
+const showLeadingIcon = computed(() => {
+  if (loading) return "i-lucide-loader-circle"
+  return leadingIcon
+})
 
-const globalConfig = getUIConfig()
+const showTrailingIcon = computed(() => {
+  if (loading) return "i-lucide-loader-circle"
+  return trailingIcon
+})
 
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.button as Record<string, unknown>) ?? {}
-) as Record<keyof typeof buttonTheme.base, string | undefined>
+const leadingIconClass = computed(() => {
+  return loading && isLeading.value ? "animate-spin" : ""
+})
 
-const { root } = button({
-  variant,
-  color,
-  size
+const trailingIconClass = computed(() => {
+  return loading && isTrailing.value ? "animate-spin" : ""
 })
 
-// Determine whether to render <a> or <button>
+defineSlots<{
+  default(props: { ui: Record<string, string> }): any
+  leading(props: { ui: Record<string, string> }): any
+  trailing(props: { ui: Record<string, string> }): any
+}>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    button,
+    {
+      variant: active && activeVariant ? activeVariant : variant,
+      color: active && activeColor ? activeColor : color,
+      size,
+      block,
+      square: square || (!label && !slots.default),
+      leading: isLeading.value,
+      trailing: isTrailing.value,
+      loading,
+      active
+    },
+    useUi("button", uiProp),
+    className
+  )
+)
+
 const Tag = href ? "a" : "button"
 </script>
 
@@ -89,9 +145,28 @@ const Tag = href ? "a" : "button"
     v-bind="$attrs"
     :is="Tag"
     :href="href"
-    :class="twMerge(root, mergedUI.root, className)"
+    :class="resolvedClasses.root"
     data-slot="rlv-button"
   >
-    <slot />
+    <slot name="leading" :ui="resolvedClasses">
+      <span v-if="isLeading" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
+        <span :class="[showLeadingIcon, leadingIconClass]" aria-hidden="true" />
+      </span>
+    </slot>
+
+    <span
+      v-if="label !== undefined && label !== null"
+      :class="resolvedClasses.label"
+      data-slot="label"
+    >
+      {{ label }}
+    </span>
+    <slot v-else />
+
+    <slot name="trailing" :ui="resolvedClasses">
+      <span v-if="isTrailing" :class="resolvedClasses.trailingIcon" data-slot="trailing-icon">
+        <span :class="[showTrailingIcon, trailingIconClass]" aria-hidden="true" />
+      </span>
+    </slot>
   </component>
 </template>

package/src/components/vue/RLVFooter.vue

@@ -1,71 +1,34 @@
 <script setup lang="ts">
 import { computed } from "vue"
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import { useUi } from "../../composables"
-import { footerTheme } from "../../themes/footer.theme.ts"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants } from "../../types"
+import footerTheme from "../../themes/footer.theme"
 
-const footer = scv({
-  slots: [...footerTheme.slots],
-  base: footerTheme.base,
-  variants: footerTheme.variants,
-  defaultVariants: footerTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
+const footer = scv(footerTheme)
+type FooterVariants = ComponentVariants<typeof footerTheme>
 
 export interface RLVFooterProps {
-  /**
-   * Whether to contain the footer content in a max-width container.
-   *
-   * @default false
-   */
-  contain?: boolean
-  /**
-   * UI overrides for individual slots, derived from the footer theme.
-   */
-  ui?: Partial<Record<keyof typeof footerTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
+  contain?: FooterVariants["contain"]
+  ui?: Partial<Record<string, string>>
   class?: string
 }
 
 const { contain = false, class: className, ui: uiProp } = defineProps<RLVFooterProps>()
 
 defineSlots<{
-  /**
-   * Content to display on the left side of the footer.
-   */
   left(props: {}): any
-  /**
-   * Content to display in the center of the footer.
-   */
   center(props: {}): any
-  /**
-   * Content to display on the right side of the footer.
-   */
   right(props: {}): any
 }>()
 
-const mergedUI = useUi("footer", uiProp as Record<string, unknown> | undefined)
-
-const resolvedClasses = computed(() => {
-  const classes = footer({
-    contain
-  })
-
-  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)
-  }
-})
+const resolvedClasses = computed(() =>
+  resolveClasses(footer, { contain }, useUi("footer", uiProp), className)
+)
 </script>
 
 <template>
-  <footer :class="[resolvedClasses.root, className]" data-slot="rlv-footer" v-bind="$attrs">
+  <footer :class="[resolvedClasses.root]" data-slot="rlv-footer" v-bind="$attrs">
     <div :class="resolvedClasses.container">
       <div :class="resolvedClasses.left" data-slot="footer-left">
         <slot name="left" />

package/src/components/vue/RLVHeader.vue

@@ -1,64 +1,21 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from "vue"
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import { useUi } from "../../composables"
-import { headerTheme } from "../../themes/header.theme.ts"
-import { getHeaderStack } from "../../utils/headerStack.ts"
-
-// ── Style engine ─────────────────────────────────────────────────────────────
-
-const header = scv({
-  slots: [...headerTheme.slots],
-  base: headerTheme.base,
-  variants: headerTheme.variants,
-  defaultVariants: headerTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants } from "../../types"
+import headerTheme from "../../themes/header.theme"
+import { getHeaderStack } from "../../utils/headerStack"
 
-// ── Props ─────────────────────────────────────────────────────────────────────
+const header = scv(headerTheme)
+type HeaderVariants = ComponentVariants<typeof headerTheme>
 
 export interface RLVHeaderProps {
-  /**
-   * Whether to contain the header content in a max-width container.
-   *
-   * @default true
-   */
-  contain?: boolean
-  /**
-   * Sticky positioning when `fixed` is false.
-   *
-   * @default true
-   */
-  sticky?: boolean
-  /**
-   * Switches to `position: fixed; left: 0; right: 0` (layer mode). When true, `top` and
-   * `stackIndex` control the exact position.
-   *
-   * @default false
-   */
-  fixed?: boolean
-  /**
-   * Controls z-index when `fixed` is true: `z-index = 100 - stackIndex`. Lower index = higher in
-   * the visual stack.
-   *
-   * @default 0
-   */
+  contain?: HeaderVariants["contain"]
+  sticky?: HeaderVariants["sticky"]
+  fixed?: HeaderVariants["fixed"]
   stackIndex?: number
-  /**
-   * When true, hides the header on scroll-down and shows it on scroll-up. Uses a passive `scroll`
-   * event listener — no external dependencies. Only meaningful when `fixed` is true.
-   *
-   * @default false
-   */
   hideOnScroll?: 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.
-   */
+  ui?: Partial<Record<string, string>>
   class?: string
 }
 
@@ -72,42 +29,15 @@ const {
   ui: uiProp
 } = defineProps<RLVHeaderProps>()
 
-// ── Slots ─────────────────────────────────────────────────────────────────────
-
 defineSlots<{
-  /**
-   * Content to display on the left side of the header (e.g., Logo).
-   */
   left(props: {}): any
-  /**
-   * Content to display in the center of the header (e.g., Navigation Links).
-   */
   center(props: {}): any
-  /**
-   * Content to display on the right side of the header (e.g., User Menu, Theme Toggle).
-   */
   right(props: {}): any
 }>()
 
-// ── UI merge ──────────────────────────────────────────────────────────────────
-
-const mergedUI = useUi("header", uiProp as Record<string, unknown> | undefined)
-
-// ── Resolved classes ──────────────────────────────────────────────────────────
-
-const resolvedClasses = computed(() => {
-  const classes = header({ contain, sticky, fixed })
-  return {
-    root: twMerge(classes.root, mergedUI.value.root as string | undefined),
-    content: twMerge(classes.content, mergedUI.value.content 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)
-  }
-})
-
-// ── Fixed-mode state ──────────────────────────────────────────────────────────
+const resolvedClasses = computed(() =>
+  resolveClasses(header, { contain, sticky, fixed }, useUi("header", uiProp), className)
+)
 
 const id = `rlv-header-${Math.random().toString(36).slice(2, 8)}`
 const rootRef = ref<HTMLElement | null>(null)
@@ -115,9 +45,6 @@ const contentRef = ref<HTMLElement | null>(null)
 const naturalHeight = ref(0)
 const isVisible = ref(true)
 
-/**
- * Inline style applied to the root element in fixed mode.
- */
 const fixedStyle = computed(() => {
   if (!fixed) return {}
   return {
@@ -125,8 +52,6 @@ const fixedStyle = computed(() => {
   }
 })
 
-// ── Lifecycle: height measurement + scroll listener ───────────────────────────
-
 let resizeObserver: ResizeObserver | null = null
 let scrollHandler: (() => void) | null = null
 
@@ -139,7 +64,6 @@ onMounted(() => {
     stack.register(id, stackIndex, naturalHeight.value, isVisible.value, rootRef.value)
   }
 
-  // Measure natural height via ResizeObserver
   if (contentRef.value) {
     naturalHeight.value = contentRef.value.getBoundingClientRect().height
     resizeObserver = new ResizeObserver((entries) => {
@@ -152,14 +76,12 @@ onMounted(() => {
     resizeObserver.observe(contentRef.value)
   }
 
-  // Raw scroll listener for hideOnScroll
   if (hideOnScroll) {
     let localLastScrollY = window.scrollY
     scrollHandler = () => {
       const current = window.scrollY
       const diff = current - localLastScrollY
 
-      // Ignore tiny jitter
       if (Math.abs(diff) < 10) return
 
       const newVisible = current <= 50 ? true : diff <= 0
@@ -188,16 +110,11 @@ onUnmounted(() => {
   <header
     ref="rootRef"
     :id="id"
-    :class="[resolvedClasses.root, className]"
+    :class="[resolvedClasses.root]"
     :style="fixedStyle"
     data-slot="rlv-header"
     v-bind="$attrs"
   >
-    <!--
-      content wrapper: always rendered, but only meaningful in fixed mode.
-      The ResizeObserver targets this element so the `<header>` root's padding/border
-      don't interfere with the height measurement.
-    -->
     <div ref="contentRef" :class="resolvedClasses.content">
       <div :class="resolvedClasses.container">
         <div :class="resolvedClasses.left" data-slot="header-left">

package/src/components/vue/RLVIcon.vue

@@ -1,51 +1,25 @@
 <script setup lang="ts">
 import { computed } from "vue"
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import { useUi } from "../../composables"
-import { iconTheme } from "../../themes/icon.theme"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants } from "../../types"
+import iconTheme from "../../themes/icon.theme"
 
-const icon = scv({
-  slots: [...iconTheme.slots],
-  base: iconTheme.base,
-  variants: iconTheme.variants,
-  defaultVariants: iconTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
+const icon = scv(iconTheme)
+type IconVariants = ComponentVariants<typeof iconTheme>
 
 export interface RLVIconProps {
-  /**
-   * Icon name following the UnoCSS icons format. Can be a string like "i-lucide-home" or a Vue
-   * component.
-   *
-   * @example
-   *   "i-lucide-home"
-   */
   name: string
-  /**
-   * Size variant for the icon.
-   */
-  size?: keyof typeof iconTheme.variants.size
-  /**
-   * External class applied to the root element.
-   */
+  size?: IconVariants["size"]
   class?: string
-  /**
-   * UI overrides for individual slots.
-   */
-  ui?: Partial<Record<keyof typeof iconTheme.base, string>>
+  ui?: Partial<Record<string, string>>
 }
 
 const { name, size = "md", class: className, ui: uiProp } = defineProps<RLVIconProps>()
 
-const mergedUI = useUi("icon", uiProp as Record<string, unknown> | undefined)
-
-const resolvedClasses = computed(() => {
-  const { root } = icon({ size })
-  return {
-    root: twMerge(root, mergedUI.value.root, className)
-  }
-})
+const resolvedClasses = computed(() =>
+  resolveClasses(icon, { size }, useUi("icon", uiProp), className)
+)
 
 defineSlots<{
   default(props: {}): any

package/src/components/vue/RLVLogo.vue

@@ -1,51 +1,19 @@
 <script setup lang="ts">
 import { computed } from "vue"
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { logoTheme } from "../../themes/logo.theme.ts"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import logoTheme from "../../themes/logo.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
-const logo = scv({
-  slots: [...logoTheme.slots],
-  base: logoTheme.base,
-  variants: logoTheme.variants,
-  defaultVariants: logoTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
+const logo = scv(logoTheme)
 
 export interface RLVLogoProps {
-  /**
-   * The variant of the logo to display.
-   *
-   * @default "logomark"
-   */
   variant?: string
-  /**
-   * Override the color mode.
-   */
   mode?: "color" | "white" | "black"
-  /**
-   * The URL to link to.
-   *
-   * @default "/"
-   */
   href?: string
-  /**
-   * UI overrides for individual slots, derived from the logo theme.
-   */
-  ui?: Partial<Record<keyof typeof logoTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
+  ui?: Partial<Record<string, string>>
   class?: string
-  /**
-   * The alt text for the logo image.
-   */
   alt?: string
-  /**
-   * Standard HTML attributes for <a>
-   */
   [key: string]: unknown
 }
 
@@ -55,30 +23,15 @@ const props = withDefaults(defineProps<RLVLogoProps>(), {
 })
 
 defineSlots<{
-  /**
-   * The default slot for the logo content (e.g., text, custom elements).
-   */
   default(props: {}): any
 }>()
 
-const globalConfig = getUIConfig()
-
-const mergedUI = computed(
-  () =>
-    defu(props.ui ?? {}, (globalConfig.logo as Record<string, unknown>) ?? {}) as Record<
-      keyof typeof logoTheme.base,
-      string | undefined
-    >
+const resolvedClasses = computed(() =>
+  resolveClasses(logo, {}, useUi("logo", props.ui), props.class)
 )
 
-const resolvedClasses = computed(() => {
-  const { root } = logo()
-  return {
-    root: twMerge(root, mergedUI.value.root, props.class)
-  }
-})
-
 const logoSrc = computed<string | null>(() => {
+  const globalConfig = getUIConfig()
   const rcLogos = globalConfig.logos as Record<string, any>
   let src: any = null
 
@@ -114,7 +67,6 @@ const Tag = computed(() => (props.href ? "a" : "div"))
     data-slot="rlv-logo"
   >
     <template v-if="logoSrc">
-      <!-- Using mode='svg' pattern is not strictly needed for UnoCSS icons -->
       <span v-if="isIcon" :class="[logoSrc, 'size-full block shrink-0']" aria-hidden="true" />
       <img v-else :src="logoSrc" :alt="alt || ''" class="size-full block object-contain shrink-0" />
     </template>