@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLAWindowMockup.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { WindowMockupProps } from "../../types"
-import windowMockupThemeDefault from "../../themes/window-mockup.theme"
-
-const windowMockup = scv(windowMockupThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as WindowMockupProps
-
-const classes = resolveClasses(windowMockup, {}, useUi("windowMockup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { WindowMockupProps } from "../../types"
+import windowMockupThemeDefault, { createWindowMockupTheme } from "../../themes/window-mockup.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const windowMockupTheme = uiConfig.colors ? createWindowMockupTheme() : windowMockupThemeDefault
+
+const windowMockup = scv(windowMockupTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as WindowMockupProps
+
+const classes = resolveClasses(windowMockup, {}, useUi("windowMockup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/vue/RLVCheckbox.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 { CheckboxProps } from "../../types/components/checkbox"
+import checkboxTheme from "../../themes/checkbox.theme"
+
+const checkbox = scv(checkboxTheme)
+
+const props = withDefaults(defineProps<CheckboxProps & { modelValue?: boolean }>(), {
+  size: "md",
+  color: "primary"
+})
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void
+  (e: "change", event: Event): void
+}>()
+
+const checked = computed({
+  get: () => props.modelValue ?? props.checked ?? false,
+  set: (val) => emit("update:modelValue", val)
+})
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    checkbox,
+    {
+      size: props.size,
+      color: props.color,
+      disabled: props.disabled,
+      theme: props.theme
+    },
+    useUi("checkbox", props.ui),
+    props.class
+  )
+)
+
+function onChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  checked.value = target.checked
+  emit("change", event)
+}
+</script>
+
+<template>
+  <label :class="resolvedClasses.root" data-slot="root">
+    <div :class="resolvedClasses.container" data-slot="container">
+      <input
+        v-bind="$attrs"
+        type="checkbox"
+        :name="name"
+        :checked="checked"
+        :disabled="disabled"
+        :class="resolvedClasses.input"
+        data-slot="input"
+        @change="onChange"
+      />
+      <span v-if="checked" :class="resolvedClasses.indicator" data-slot="indicator">
+        <span class="i-lucide-check h-3 w-3 text-white" />
+      </span>
+    </div>
+    <span v-if="label" :class="resolvedClasses.label" data-slot="label">
+      {{ label }}
+    </span>
+    <slot />
+  </label>
+</template>

package/src/components/vue/RLVForm.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FormProps } from "../../types/components/form"
+import formTheme from "../../themes/form.theme"
+
+const form = scv(formTheme)
+
+const props = defineProps<FormProps>()
+
+const emit = defineEmits<{
+  (e: "submit", event: { data: any }): void
+  (e: "error", errors: any[]): void
+}>()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(form, {}, useUi("form", props.ui), props.class)
+)
+
+async function onSubmit(event: Event) {
+  event.preventDefault()
+
+  if (props.schema && props.state) {
+    try {
+      const data = await props.schema.parseAsync(props.state)
+      emit("submit", { data })
+    } catch (err: any) {
+      if (err.errors) {
+        emit("error", err.errors)
+      }
+      console.error("Form validation failed", err)
+    }
+  } else {
+    emit("submit", { data: props.state })
+  }
+}
+</script>
+
+<template>
+  <form :class="resolvedClasses.root" data-slot="root" @submit="onSubmit">
+    <slot :ui="resolvedClasses" />
+  </form>
+</template>

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 { useToast } from "./useToast"
+export { headerLayersStore } from "./useHeaderStore"

package/src/composables/useHeaderStore.ts

@@ -0,0 +1,13 @@
+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

@@ -24,6 +24,13 @@ export interface UseScrollToTopReturn {
   scrollToTop: () => void
 }
 
+function scrollToTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  })
+}
+
 export function useScrollToTop(options: UseScrollToTopOptions = {}): UseScrollToTopReturn {
   const { threshold = 200 } = options
 
@@ -38,13 +45,6 @@ export function useScrollToTop(options: UseScrollToTopOptions = {}): UseScrollTo
     scrollPercentage.value = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
   }
 
-  function scrollToTop() {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth"
-    })
-  }
-
   onMounted(() => {
     window.addEventListener("scroll", updateScrollState, { passive: true })
     updateScrollState()

package/src/composables/useToast.ts

@@ -0,0 +1,43 @@
+import { reactive } from "vue"
+import type { ThemeColor } from "../types"
+
+export interface Toast {
+  id?: string | number
+  title?: string
+  description?: string
+  icon?: string
+  color?: ThemeColor
+  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/config/index.ts

@@ -1 +1,2 @@
 export * from "./site.config"
+export * from "./security"