@rimelight/ui 0.0.24 → 0.0.25

package/src/components/vue/RLVButton.vue

@@ -1,139 +1,172 @@
-<script setup lang="ts">
-import { computed, useSlots } from "vue"
-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 {
-  variant?: keyof typeof buttonTheme.variants.variant
-  color?: keyof typeof buttonTheme.variants.color
-  size?: keyof typeof buttonTheme.variants.size
-  href?: string
-  label?: string
-  leadingIcon?: string
-  trailingIcon?: string
-  loading?: boolean
-  square?: boolean
-  block?: boolean
-  active?: boolean
-  activeColor?: keyof typeof buttonTheme.variants.color
-  activeVariant?: keyof typeof buttonTheme.variants.variant
-  ui?: Partial<Record<string, string>>
-  class?: string
-  [key: string]: unknown
-}
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  class: className,
-  ui: uiProp,
-  href,
-  label,
-  leadingIcon,
-  trailingIcon,
-  loading = false,
-  square = false,
-  block = false,
-  active = false,
-  activeColor,
-  activeVariant
-} = defineProps<RLVButtonProps>()
-
-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 showTrailingIcon = computed(() => {
-  if (loading) return "i-lucide-loader-circle"
-  return trailingIcon
-})
-
-const leadingIconClass = computed(() => {
-  return loading && isLeading.value ? "animate-spin" : ""
-})
-
-const trailingIconClass = computed(() => {
-  return loading && isTrailing.value ? "animate-spin" : ""
-})
-
-defineSlots<{
-  default(props: {}): any
-  leading(props: { ui: Record<string, string> }): any
-  trailing(props: { ui: Record<string, string> }): any
-}>()
-
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.button as Record<string, unknown>) ?? {}
-) as Record<string, string | undefined>
-
-const resolved = computed(() => 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
-}))
-
-const Tag = href ? "a" : "button"
-</script>
-
-<template>
-  <component
-    v-bind="$attrs"
-    :is="Tag"
-    :href="href"
-    :class="twMerge(resolved.root, mergedUI.root, className)"
-    data-slot="rlv-button"
-  >
-    <slot name="leading" :ui="resolved">
-      <span
-        v-if="isLeading"
-        :class="twMerge(resolved.leadingIcon, mergedUI.leadingIcon)"
-        data-slot="leading-icon"
-      >
-        <span :class="[showLeadingIcon, leadingIconClass]" aria-hidden="true" />
-      </span>
-    </slot>
-
-    <span v-if="label !== undefined && label !== null" :class="twMerge(resolved.label, mergedUI.label)" data-slot="label">
-      {{ label }}
-    </span>
-    <slot v-else />
-
-    <slot name="trailing" :ui="resolved">
-      <span
-        v-if="isTrailing"
-        :class="twMerge(resolved.trailingIcon, mergedUI.trailingIcon)"
-        data-slot="trailing-icon"
-      >
-        <span :class="[showTrailingIcon, trailingIconClass]" aria-hidden="true" />
-      </span>
-    </slot>
-  </component>
-</template>
+<script setup lang="ts">
+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(buttonTheme)
+type ButtonVariants = ComponentVariants<typeof buttonTheme>
+
+export interface RLVButtonProps {
+  /**
+   * The visual style variant of the button
+   */
+  variant?: ButtonVariants["variant"]
+  /**
+   * The color scheme applied to the button
+   */
+  color?: ButtonVariants["color"]
+  /**
+   * The size scale of the button
+   */
+  size?: ButtonVariants["size"]
+  /**
+   * When provided, renders the button as an anchor link
+   */
+  href?: string
+  /**
+   * The text label displayed inside the button
+   */
+  label?: string
+  /**
+   * Icon name displayed before the label
+   */
+  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"]
+  /**
+   * Component-specific CSS class overrides
+   */
+  ui?: Partial<Record<string, string>>
+  class?: string
+  [key: string]: unknown
+}
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  class: className,
+  ui: uiProp,
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant
+} = defineProps<RLVButtonProps>()
+
+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 showTrailingIcon = computed(() => {
+  if (loading) return "i-lucide-loader-circle"
+  return trailingIcon
+})
+
+const leadingIconClass = computed(() => {
+  return loading && isLeading.value ? "animate-spin" : ""
+})
+
+const trailingIconClass = computed(() => {
+  return loading && isTrailing.value ? "animate-spin" : ""
+})
+
+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>
+
+<template>
+  <component
+    v-bind="$attrs"
+    :is="Tag"
+    :href="href"
+    :class="resolvedClasses.root"
+    data-slot="rlv-button"
+  >
+    <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