@rimelight/ui 0.0.24 → 0.0.26

package/src/components/vue/RLVHeader.vue

@@ -1,65 +1,22 @@
 <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, ComponentSlots } 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.
-   */
-  class?: string
+  ui?: ComponentSlots<typeof headerTheme>
+  class?: any
 }
 
 const {
@@ -68,46 +25,19 @@ const {
   fixed = false,
   stackIndex = 0,
   hideOnScroll = false,
-  class: className,
-  ui: uiProp
+  ui: uiProp,
+  class: className
 } = 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,25 +110,20 @@ onUnmounted(() => {
   <header
     ref="rootRef"
     :id="id"
-    :class="[resolvedClasses.root, className]"
+    :class="[resolvedClasses.root]"
     :style="fixedStyle"
-    data-slot="rlv-header"
+    data-slot="root"
     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">
+        <div :class="resolvedClasses.left" data-slot="left">
           <slot name="left" />
         </div>
-        <div :class="resolvedClasses.center" data-slot="header-center">
+        <div :class="resolvedClasses.center" data-slot="center">
           <slot name="center" />
         </div>
-        <div :class="resolvedClasses.right" data-slot="header-right">
+        <div :class="resolvedClasses.right" data-slot="right">
           <slot name="right" />
         </div>
       </div>

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, ComponentSlots } 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.
-   */
-  class?: string
-  /**
-   * UI overrides for individual slots.
-   */
-  ui?: Partial<Record<keyof typeof iconTheme.base, string>>
+  size?: IconVariants["size"]
+  ui?: ComponentSlots<typeof iconTheme>
+  class?: any
 }
 
-const { name, size = "md", class: className, ui: uiProp } = defineProps<RLVIconProps>()
+const { name, size = "md", ui: uiProp, class: className } = 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
@@ -53,12 +27,7 @@ defineSlots<{
 </script>
 
 <template>
-  <span
-    v-bind="$attrs"
-    :class="[resolvedClasses.root, name]"
-    data-slot="rlv-icon"
-    aria-hidden="true"
-  >
+  <span v-bind="$attrs" :class="[resolvedClasses.root, name]" data-slot="root" aria-hidden="true">
     <slot />
   </span>
 </template>

package/src/components/vue/RLVLogo.vue

@@ -1,51 +1,20 @@
 <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 type { ComponentSlots } from "../../types"
+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.
-   */
-  class?: string
-  /**
-   * The alt text for the logo image.
-   */
   alt?: string
-  /**
-   * Standard HTML attributes for <a>
-   */
+  ui?: ComponentSlots<typeof logoTheme>
+  class?: any
   [key: string]: unknown
 }
 
@@ -55,30 +24,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
 
@@ -111,10 +65,9 @@ const Tag = computed(() => (props.href ? "a" : "div"))
     :href="Tag === 'a' ? href : undefined"
     :aria-label="alt || variant"
     :class="resolvedClasses.root"
-    data-slot="rlv-logo"
+    data-slot="root"
   >
     <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>

package/src/components/vue/RLVPlaceholder.vue

@@ -1,35 +1,19 @@
 <script setup lang="ts">
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { placeholderTheme } from "../../themes/placeholder.theme.ts"
-import { getUIConfig } from "virtual:rimelight-ui"
+import { computed } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentSlots } from "../../types"
+import placeholderTheme from "../../themes/placeholder.theme"
 
-const placeholder = scv({
-  slots: [...placeholderTheme.slots],
-  base: placeholderTheme.base,
-  variants: placeholderTheme.variants,
-  compoundVariants: [...placeholderTheme.compoundVariants],
-  defaultVariants: placeholderTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
+const placeholder = scv(placeholderTheme)
 
 export interface RLVPlaceholderProps {
-  /**
-   * UI overrides for individual slots, derived from the placeholder theme.
-   */
-  ui?: Partial<Record<keyof typeof placeholderTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string
-  /**
-   * Standard HTML attributes.
-   */
+  ui?: ComponentSlots<typeof placeholderTheme>
+  class?: any
   [key: string]: unknown
 }
 
-const { class: className, ui: uiProp } = defineProps<RLVPlaceholderProps>()
+const { ui: uiProp, class: className } = defineProps<RLVPlaceholderProps>()
 
 defineSlots<{
   /**
@@ -38,19 +22,14 @@ defineSlots<{
   default(props: {}): any
 }>()
 
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.placeholder as Record<string, unknown>) ?? {}
-) as Record<keyof typeof placeholderTheme.base, string | undefined>
-
-const { base, svg } = placeholder()
+const resolvedClasses = computed(() =>
+  resolveClasses(placeholder, {}, useUi("placeholder", uiProp), className)
+)
 </script>
 
 <template>
-  <div :class="twMerge(base, mergedUI.base, className)" v-bind="$attrs">
-    <svg :class="twMerge(svg, mergedUI.svg)">
+  <div :class="resolvedClasses.base" v-bind="$attrs">
+    <svg :class="resolvedClasses.svg">
       <defs>
         <pattern
           id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

package/src/components/vue/RLVScrollToTop.vue

@@ -1,66 +1,24 @@
 <script setup lang="ts">
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { scrollToTopTheme } from "../../themes/scroll-to-top.theme.ts"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 import { useScrollToTop } from "../../composables/useScrollToTop"
 import { computed } from "vue"
-import { getUIConfig } from "virtual:rimelight-ui"
+
+const scrollToTop = scv(scrollToTopTheme)
+type ScrollToTopVariants = ComponentVariants<typeof scrollToTopTheme>
 
 export interface RLVScrollToTopProps {
-  /**
-   * Button color.
-   *
-   * @default "primary"
-   */
-  color?: keyof typeof scrollToTopTheme.variants.color
-  /**
-   * Transition duration for the progress circle (in seconds).
-   *
-   * @default 0.1
-   */
+  color?: ScrollToTopVariants["color"]
+  progressWidth?: number
   duration?: number
-  /**
-   * Scroll threshold (in pixels) before the button becomes visible.
-   *
-   * @default 200
-   */
   threshold?: number
-  /**
-   * Whether to show the scroll progress indicator.
-   *
-   * @default false
-   */
   showProgress?: boolean
-  /**
-   * Stroke width of the progress circle.
-   *
-   * @default 6
-   */
-  progressWidth?: number
-  /**
-   * UI overrides for individual slots, derived from the scroll-to-top theme.
-   */
-  ui?: Partial<Record<keyof typeof scrollToTopTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string
-  /**
-   * Standard HTML attributes.
-   */
-  [key: string]: unknown
+  ui?: ComponentSlots<typeof scrollToTopTheme>
+  class?: any
 }
 
-const scrollToTop = scv({
-  slots: [...scrollToTopTheme.slots],
-  base: scrollToTopTheme.base,
-  variants: scrollToTopTheme.variants,
-  compoundVariants: [...scrollToTopTheme.compoundVariants],
-  defaultVariants: scrollToTopTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
-
 const {
   color = "primary",
   progressWidth = 6,
@@ -71,23 +29,7 @@ const {
   class: className
 } = defineProps<RLVScrollToTopProps>()
 
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig["scroll-to-top"] as Record<string, unknown>) ?? {}
-) as Record<keyof typeof scrollToTopTheme.base, string | undefined>
-
-const {
-  root,
-  button,
-  progressBase,
-  svg: svgClass,
-  iconContainer,
-  icon
-} = scrollToTop({
-  color
-})
+const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
 
 const {
   isVisible,
@@ -107,25 +49,12 @@ const durationInSeconds = computed(() => `${duration}s`)
 
 <template>
   <div
-    :class="[
-      'rla-scroll-to-top fixed bottom-6 right-6 z-50',
-      { visible: isVisible },
-      twMerge(root, mergedUI.root, className)
-    ]"
+    :class="['rla-scroll-to-top fixed bottom-6 right-6 z-50', { visible: isVisible }, classes.root]"
     v-bind="$attrs"
   >
-    <button
-      type="button"
-      :class="twMerge(button, mergedUI.button)"
-      aria-label="Scroll to top"
-      @click="scrollToTopFn"
-    >
-      <div :class="twMerge(progressBase, mergedUI.progressBase)">
-        <svg
-          :class="twMerge(svgClass, mergedUI.svg)"
-          viewBox="0 0 100 100"
-          shape-rendering="geometricPrecision"
-        >
+    <button type="button" :class="classes.button" aria-label="Scroll to top" @click="scrollToTopFn">
+      <div :class="classes.progressBase">
+        <svg :class="classes.svg" viewBox="0 0 100 100" shape-rendering="geometricPrecision">
           <circle
             cx="50"
             cy="50"
@@ -153,7 +82,7 @@ const durationInSeconds = computed(() => `${duration}s`)
             }"
           />
         </svg>
-        <div :class="twMerge(iconContainer, mergedUI.iconContainer)">
+        <div :class="classes.iconContainer">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -164,7 +93,7 @@ const durationInSeconds = computed(() => `${duration}s`)
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            :class="twMerge(icon, mergedUI.icon)"
+            :class="classes.icon"
           >
             <path d="m5 12 7-7 7 7" />
             <path d="M12 19V5" />