@rimelight/ui 0.0.32 → 0.0.33

package/src/components/vue/RLVFormField.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FormFieldProps } from "../../types/components/form-field"
+import formFieldTheme from "../../themes/form-field.theme"
+
+const formField = scv(formFieldTheme)
+
+const props = withDefaults(defineProps<FormFieldProps>(), {
+  size: "md"
+})
+
+const slots = useSlots()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    formField,
+    {
+      size: props.size
+    },
+    useUi("formField", props.ui),
+    props.class
+  )
+)
+</script>
+
+<template>
+  <div :class="resolvedClasses.root" data-slot="root">
+    <div v-if="label || slots.label" class="flex items-center justify-between gap-2">
+      <label v-if="label || slots.label" :class="resolvedClasses.label" data-slot="label">
+        <slot name="label">{{ label }}</slot>
+        <span v-if="required" class="text-error-500">*</span>
+      </label>
+      <slot name="hint" />
+    </div>
+
+    <p
+      v-if="description || slots.description"
+      :class="resolvedClasses.description"
+      data-slot="description"
+    >
+      <slot name="description">{{ description }}</slot>
+    </p>
+
+    <div class="relative">
+      <slot :ui="resolvedClasses" />
+    </div>
+
+    <p v-if="error || slots.error" :class="resolvedClasses.error" data-slot="error">
+      <slot name="error">{{ error }}</slot>
+    </p>
+
+    <div v-if="slots.help" class="mt-1">
+      <slot name="help" />
+    </div>
+  </div>
+</template>

package/src/components/vue/RLVInput.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputProps } from "../../types/components/input"
+import inputTheme from "../../themes/input.theme"
+
+const input = scv(inputTheme)
+
+const props = withDefaults(defineProps<InputProps & { modelValue?: string | number }>(), {
+  type: "text",
+  size: "md",
+  color: "primary"
+})
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number): void
+  (e: "change", event: Event): void
+  (e: "input", event: Event): void
+  (e: "focus", event: FocusEvent): void
+  (e: "blur", event: FocusEvent): void
+}>()
+
+const slots = useSlots()
+
+const value = computed({
+  get: () => props.modelValue ?? props.value ?? "",
+  set: (val) => emit("update:modelValue", val)
+})
+
+const isLeading = computed(() => !!(props.leadingIcon || slots.leading))
+const isTrailing = computed(() => !!(props.trailingIcon || slots.trailing))
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    input,
+    {
+      size: props.size,
+      color: props.color,
+      error: !!props.error,
+      disabled: props.disabled,
+      leading: isLeading.value,
+      trailing: isTrailing.value,
+      theme: props.theme
+    },
+    useUi("input", props.ui),
+    props.class
+  )
+)
+
+function onInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  value.value = target.value
+  emit("input", event)
+}
+
+function onChange(event: Event) {
+  emit("change", event)
+}
+</script>
+
+<template>
+  <div :class="resolvedClasses.root" data-slot="root">
+    <slot name="leading" :ui="resolvedClasses">
+      <span v-if="isLeading" :class="resolvedClasses.leadingIcon" data-slot="leading-icon">
+        <span :class="leadingIcon" aria-hidden="true" />
+      </span>
+    </slot>
+
+    <input
+      v-bind="$attrs"
+      :type="type"
+      :name="name"
+      :value="value"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :required="required"
+      :class="resolvedClasses.input"
+      data-slot="input"
+      @input="onInput"
+      @change="onChange"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+    />
+
+    <slot name="trailing" :ui="resolvedClasses">
+      <span v-if="isTrailing" :class="resolvedClasses.trailingIcon" data-slot="trailing-icon">
+        <span :class="trailingIcon" aria-hidden="true" />
+      </span>
+    </slot>
+  </div>
+</template>

package/src/components/vue/RLVPost.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PostProps } from "../../types/components/post"
+import postTheme from "../../themes/post.theme"
+
+const post = scv(postTheme)
+
+const props = withDefaults(defineProps<PostProps>(), {
+  variant: "soft"
+})
+
+const slots = useSlots()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(post, { variant: props.variant }, useUi("post", props.ui), props.class)
+)
+
+const Tag = props.to ? "a" : "div"
+const formattedDate = computed(() =>
+  props.date ? (props.date instanceof Date ? props.date.toLocaleDateString() : props.date) : null
+)
+</script>
+
+<template>
+  <component :is="Tag" :href="to" :class="resolvedClasses.root" data-slot="root">
+    <slot name="image" :ui="resolvedClasses">
+      <div v-if="image" :class="resolvedClasses.imageWrapper" data-slot="image-wrapper">
+        <img
+          :src="typeof image === 'string' ? image : image.src"
+          :alt="title"
+          :class="resolvedClasses.image"
+          data-slot="image"
+        />
+      </div>
+    </slot>
+
+    <div :class="resolvedClasses.content" data-slot="content">
+      <slot name="title" :ui="resolvedClasses">
+        <h3 v-if="title" :class="resolvedClasses.title" data-slot="title">{{ title }}</h3>
+      </slot>
+
+      <slot name="description" :ui="resolvedClasses">
+        <p v-if="description" :class="resolvedClasses.description" data-slot="description">
+          {{ description }}
+        </p>
+      </slot>
+
+      <slot name="date" :ui="resolvedClasses">
+        <time v-if="formattedDate" :class="resolvedClasses.date" data-slot="date">{{
+          formattedDate
+        }}</time>
+      </slot>
+
+      <slot />
+    </div>
+
+    <div v-if="slots.footer" :class="resolvedClasses.footer" data-slot="footer">
+      <slot name="footer" :ui="resolvedClasses" />
+    </div>
+  </component>
+</template>

package/src/components/vue/RLVPosts.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PostsProps } from "../../types/components/posts"
+import postsTheme from "../../themes/posts.theme"
+
+const posts = scv(postsTheme)
+
+const props = defineProps<PostsProps>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(posts, {}, useUi("posts", props.ui), props.class)
+)
+</script>
+
+<template>
+  <div :class="resolvedClasses.root" data-slot="root">
+    <slot />
+  </div>
+</template>

package/src/components/vue/RLVSection.vue

@@ -2,12 +2,12 @@
 import { computed, useSlots } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { SectionProps } from "../../types/components/section"
-import sectionTheme from "../../themes/section.theme"
+import type { PageSectionProps } from "../../types/components/page-section"
+import pageSectionTheme from "../../themes/page-section.theme"
 import RLVIcon from "./RLVIcon.vue"
 import RLVButton from "./RLVButton.vue"
 
-const section = scv(sectionTheme)
+const section = scv(pageSectionTheme)
 
 const {
   as = "div",
@@ -18,10 +18,11 @@ const {
   ui: uiProp,
   class: className,
   headline,
+  icon,
   title,
   description,
   links
-} = defineProps<SectionProps>()
+} = defineProps<PageSectionProps>()
 
 const slots = useSlots()
 

package/src/components/vue/RLVToast.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ToastProps } from "../../types/components/toast"
+import toastTheme from "../../themes/toast.theme"
+
+const toast = scv(toastTheme)
+
+const props = withDefaults(defineProps<ToastProps & { id?: string | number }>(), {
+  variant: "default",
+  duration: 5000
+})
+
+const emit = defineEmits<{
+  (e: "close", id: string | number | undefined): void
+}>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(toast, { variant: props.variant }, useUi("toast", props.ui), props.class)
+)
+
+const variantIcons: Record<string, string> = {
+  default: "i-lucide-bell",
+  destructive: "i-lucide-alert-circle",
+  success: "i-lucide-check-circle-2",
+  warning: "i-lucide-alert-triangle",
+  info: "i-lucide-info"
+}
+
+const icon = computed(() => variantIcons[props.variant] ?? variantIcons.default!)
+</script>
+
+<template>
+  <div
+    :class="resolvedClasses.root"
+    data-slot="root"
+    role="alert"
+    aria-live="assertive"
+    aria-atomic="true"
+  >
+    <span :class="[icon, 'size-4 shrink-0 mt-0.5']" aria-hidden="true" />
+
+    <div class="flex flex-col gap-0.5 flex-1 min-w-0">
+      <div v-if="title" :class="resolvedClasses.title" data-slot="title">
+        {{ title }}
+      </div>
+      <div v-if="description" :class="resolvedClasses.description" data-slot="description">
+        {{ description }}
+      </div>
+      <slot />
+    </div>
+
+    <button v-if="actionLabel" type="button" :class="resolvedClasses.action" data-slot="action">
+      {{ actionLabel }}
+    </button>
+
+    <button
+      type="button"
+      :class="resolvedClasses.close"
+      data-slot="close"
+      aria-label="Dismiss notification"
+      @click="emit('close', id)"
+    >
+      <span class="i-lucide-x size-3.5" aria-hidden="true" />
+    </button>
+  </div>
+</template>

package/src/components/vue/RLVToaster.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useToast } from "../../composables/useToast"
+import RLVToast from "./RLVToast.vue"
+
+const { toasts, remove } = useToast()
+</script>
+
+<template>
+  <div
+    class="fixed bottom-0 right-0 p-4 z-[100] flex flex-col gap-2 w-full max-w-sm pointer-events-none"
+  >
+    <TransitionGroup
+      enter-active-class="transition duration-300 ease-out"
+      enter-from-class="transform translate-y-2 opacity-0"
+      enter-to-class="transform translate-y-0 opacity-100"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="transform translate-y-0 opacity-100"
+      leave-to-class="transform translate-y-2 opacity-0"
+    >
+      <RLVToast
+        v-for="toast in toasts"
+        :key="toast.id"
+        v-bind="toast"
+        class="pointer-events-auto"
+        @close="remove"
+      />
+    </TransitionGroup>
+  </div>
+</template>

package/src/composables/index.ts

@@ -1 +1,3 @@
-export { useScrollToTop } from "./useScrollToTop"
+export { useScrollToTop } from "./useScrollToTop"
+export { useToast } from "./useToast"
+export { headerLayersStore } from "./useHeaderStore"

package/src/composables/useHeaderStore.ts

@@ -0,0 +1,14 @@
+import { map } from "nanostores"
+
+export interface HeaderLayerInfo {
+  order: number
+  isVisible: boolean
+  height: number
+}
+
+/**
+ * Global store tracking all registered header layers.
+ * This allows child components to subscribe to header layer changes
+ * even across Vue/Astro boundaries, since nanostores is framework-agnostic.
+ */
+export const headerLayersStore = map<Record<string, HeaderLayerInfo>>({})

package/src/composables/useScrollToTop.ts

@@ -1,62 +1,62 @@
-import { ref, onMounted, onUnmounted, type Ref } from "vue"
-
-export interface UseScrollToTopOptions {
-  /**
-   * The scroll threshold (in pixels) before the button becomes visible.
-   *
-   * @default 200
-   */
-  threshold?: number
-}
-
-export interface UseScrollToTopReturn {
-  /**
-   * Whether the scroll-to-top button should be visible.
-   */
-  isVisible: Ref<boolean>
-  /**
-   * The current scroll percentage (0-100).
-   */
-  scrollPercentage: Ref<number>
-  /**
-   * Scrolls the window to the top with a smooth animation.
-   */
-  scrollToTop: () => void
-}
-
-export function useScrollToTop(options: UseScrollToTopOptions = {}): UseScrollToTopReturn {
-  const { threshold = 200 } = options
-
-  const isVisible = ref(false)
-  const scrollPercentage = ref(0)
-
-  function updateScrollState() {
-    const scrollTop = window.scrollY || document.documentElement.scrollTop
-    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
-
-    isVisible.value = scrollTop > threshold
-    scrollPercentage.value = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
-  }
-
-  function scrollToTop() {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth"
-    })
-  }
-
-  onMounted(() => {
-    window.addEventListener("scroll", updateScrollState, { passive: true })
-    updateScrollState()
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener("scroll", updateScrollState)
-  })
-
-  return {
-    isVisible,
-    scrollPercentage,
-    scrollToTop
-  }
-}
+import { ref, onMounted, onUnmounted, type Ref } from "vue"
+
+export interface UseScrollToTopOptions {
+  /**
+   * The scroll threshold (in pixels) before the button becomes visible.
+   *
+   * @default 200
+   */
+  threshold?: number
+}
+
+export interface UseScrollToTopReturn {
+  /**
+   * Whether the scroll-to-top button should be visible.
+   */
+  isVisible: Ref<boolean>
+  /**
+   * The current scroll percentage (0-100).
+   */
+  scrollPercentage: Ref<number>
+  /**
+   * Scrolls the window to the top with a smooth animation.
+   */
+  scrollToTop: () => void
+}
+
+function scrollToTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  })
+}
+
+export function useScrollToTop(options: UseScrollToTopOptions = {}): UseScrollToTopReturn {
+  const { threshold = 200 } = options
+
+  const isVisible = ref(false)
+  const scrollPercentage = ref(0)
+
+  function updateScrollState() {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop
+    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
+
+    isVisible.value = scrollTop > threshold
+    scrollPercentage.value = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
+  }
+
+  onMounted(() => {
+    window.addEventListener("scroll", updateScrollState, { passive: true })
+    updateScrollState()
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener("scroll", updateScrollState)
+  })
+
+  return {
+    isVisible,
+    scrollPercentage,
+    scrollToTop
+  }
+}

package/src/composables/useToast.ts

@@ -0,0 +1,42 @@
+import { reactive } from "vue"
+
+export interface Toast {
+  id?: string | number
+  title?: string
+  description?: string
+  icon?: string
+  color?: "primary" | "success" | "warning" | "error" | "info" | "neutral"
+  timeout?: number
+  callback?: () => void
+}
+
+const toasts = reactive<Toast[]>([])
+
+export function useToast() {
+  const add = (toast: Toast) => {
+    const id = toast.id || Date.now()
+    const newToast = { ...toast, id }
+    toasts.push(newToast)
+
+    if (toast.timeout !== 0) {
+      setTimeout(() => {
+        remove(id)
+      }, toast.timeout || 5000)
+    }
+
+    return newToast
+  }
+
+  const remove = (id: string | number) => {
+    const index = toasts.findIndex((t) => t.id === id)
+    if (index !== -1) {
+      toasts.splice(index, 1)
+    }
+  }
+
+  return {
+    toasts,
+    add,
+    remove
+  }
+}

package/src/env.d.ts

@@ -1,10 +1,5 @@
 /// <reference types="astro/client" />
 
-declare module "virtual:nuxt-ui-plugins" {
-  import type { Plugin } from "vue"
-  const plugin: Plugin
-  export default plugin
-}
 
 declare module "virtual:rimelight-ui" {
   import type { DefaultUIConfig } from "../themes"
@@ -17,11 +12,6 @@ interface StarlightAddonsConfig {
   share?: boolean
 }
 
-declare module "virtual:rimelight-starlight-addons-config" {
-  const config: StarlightAddonsConfig
-  export default config
-}
-
 declare module "virtual:rimelight-ui-docs-meta" {
   const meta: Record<string, unknown>
   export default meta
@@ -43,8 +33,5 @@ declare module "turndown-plugin-gfm" {
 declare namespace App {
   interface Locals {
     cfContext?: Record<string, unknown>
-    // Extended locals used by Starlight Addons for richer type safety
-    starlightSidebarTopics?: any
-    starlightRoute?: any
   }
 }