@rimelight/ui 0.0.31 → 0.0.33

package/src/components/astro/{RLAEmbedYoutube.astro → RLAVideo.astro}

@@ -1,197 +1,201 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { EmbedYoutubeProps } from "../../types"
-import embedYoutubeTheme from "../../themes/embedYoutube.theme"
-import { Image } from "astro:assets"
-
-const PLACEHOLDER_THUMBNAIL = "/assets/placeholder.webp";
-const YOUTUBE_EMBED_BASE = "https://www.youtube.com/embed/";
-const VALID_ID_PATTERN = /^[\w-]{11}$/;
-const KNOWN_PREFIXES = ["www.", "m.", "music.", "gaming."];
-const YOUTUBE_THUMB_BASE = "https://i3.ytimg.com/vi/";
-const MAXRES_THUMBNAIL = "maxresdefault.jpg";
-const DEFAULT_THUMBNAIL = "hqdefault.jpg";
-
-const thumbnailAvailabilityCache = new Map<string, boolean>();
-
-function normalizeHost(host: string): string {
-  for (const prefix of KNOWN_PREFIXES) {
-    if (host.startsWith(prefix)) {
-      return host.slice(prefix.length);
-    }
-  }
-  return host;
-}
-
-function sanitizeVideoId(id: string | null): string | null {
-  if (!id) return null;
-  return VALID_ID_PATTERN.test(id) ? id : null;
-}
-
-function extractYoutubeVideoId(rawUrl: string): string | null {
-  if (!rawUrl) return null;
-
-  try {
-    const url = new URL(rawUrl);
-    const host = normalizeHost(url.hostname);
-
-    if (host === "youtu.be") {
-      const id = url.pathname.split("/").filter(Boolean)[0] ?? null;
-      return sanitizeVideoId(id);
-    }
-
-    if (host.endsWith("youtube.com")) {
-      const paramsId = sanitizeVideoId(url.searchParams.get("v"));
-      if (paramsId) return paramsId;
-
-      const segments = url.pathname.split("/").filter(Boolean);
-      if (!segments.length) return null;
-
-      if (segments[0] === "embed" || segments[0] === "shorts" || segments[0] === "live") {
-        return sanitizeVideoId(segments[1] ?? null);
-      }
-
-      return sanitizeVideoId(segments[segments.length - 1] ?? null);
-    }
-  } catch {
-    // If it's just an 11-character ID passed directly, return it validated
-    if (VALID_ID_PATTERN.test(rawUrl)) {
-      return rawUrl;
-    }
-    return null;
-  }
-
-  return null;
-}
-
-async function isThumbnailAvailable(url: string): Promise<boolean> {
-  if (thumbnailAvailabilityCache.has(url)) {
-    return thumbnailAvailabilityCache.get(url)!;
-  }
-
-  if (typeof fetch !== "function") {
-    return false;
-  }
-
-  try {
-    const response = await fetch(url, { method: "HEAD" });
-    let available = response.ok;
-
-    if (!available && response.status === 405) {
-      const getResponse = await fetch(url, { method: "GET" });
-      available = getResponse.ok;
-    }
-
-    thumbnailAvailabilityCache.set(url, available);
-    return available;
-  } catch {
-    return false;
-  }
-}
-
-async function getYoutubeThumbnail(rawUrl: string): Promise<string> {
-  const id = extractYoutubeVideoId(rawUrl);
-  if (!id) return PLACEHOLDER_THUMBNAIL;
-
-  const baseUrl = `${YOUTUBE_THUMB_BASE}${id}`;
-  const maxResUrl = `${baseUrl}/${MAXRES_THUMBNAIL}`;
-
-  if (await isThumbnailAvailable(maxResUrl)) {
-    return maxResUrl;
-  }
-
-  return `${baseUrl}/${DEFAULT_THUMBNAIL}`;
-}
-
-function getYoutubeEmbedUrl(rawUrl: string): string | null {
-  const id = extractYoutubeVideoId(rawUrl);
-  return id ? `${YOUTUBE_EMBED_BASE}${id}?autoplay=1` : null;
-}
-
-const embedYoutube = scv(embedYoutubeTheme)
-
-const {
-  src,
-  title = "YouTube Video Player",
-  icon = "i-lucide-play",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as EmbedYoutubeProps
-
-const classes = resolveClasses(embedYoutube, {
-  title: !!(Astro.slots.has("title") || title),
-  icon: !!(Astro.slots.has("icon") || icon),
-}, useUi("embedYoutube", uiProp), className);
-
-const embedUrl = getYoutubeEmbedUrl(src);
-const thumbnail = await getYoutubeThumbnail(src);
-const isPlayable = Boolean(embedUrl);
-const ariaLabel = isPlayable ? "Play YouTube Video" : "YouTube Video Unavailable";
----
-
-<div
-    class:list={[classes.root]}
-    {...rest}
->
-  <button
-    type="button"
-    data-youtube-trigger
-    aria-label={ariaLabel}
-    data-embed-url={isPlayable ? embedUrl : undefined}
-    disabled={!isPlayable}
-    data-video-title={title}
-    class:list={[classes.trigger]}
-  >
-    <Image
-      layout="full-width"
-      src={thumbnail}
-      alt={title}
-      width="1280"
-      height="720"
-      loading="lazy"
-      class:list={[classes.image]}
-    />
-
-    <slot name="icon">
-      <span class:list={[classes.icon, icon]} aria-hidden="true" />
-    </slot>
-  </button>
-</div>
-
-<script is:inline>
-  (() => {
-    const root = document.currentScript?.previousElementSibling;
-    if (!(root instanceof HTMLElement)) return;
-
-    const trigger = root.querySelector("[data-youtube-trigger]");
-    if (!(trigger instanceof HTMLButtonElement)) return;
-
-    const embedUrl = trigger.dataset.embedUrl;
-    const title = trigger.dataset.videoTitle;
-    if (!embedUrl) return;
-
-    const activate = () => {
-      const iframe = document.createElement("iframe");
-      iframe.src = embedUrl;
-      iframe.title = title;
-      iframe.allow =
-          "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
-      iframe.allowFullscreen = true;
-      iframe.loading = "lazy";
-      iframe.referrerPolicy = "strict-origin-when-cross-origin";
-      iframe.classList.add("w-full", "h-full", "absolute", "inset-0");
-
-      root.replaceChildren(iframe);
-    };
-
-    trigger.addEventListener("click", activate, { once: true });
-    trigger.addEventListener("keydown", (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        activate();
-      }
-    }, { once: true });
-  })();
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { VideoProps } from "../../types"
+import videoThemeDefault, { createVideoTheme } from "../../themes/video.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import Image from "astro/components/Image.astro"
+
+const PLACEHOLDER_THUMBNAIL = "/assets/placeholder.webp";
+const YOUTUBE_EMBED_BASE = "https://www.youtube.com/embed/";
+const VALID_ID_PATTERN = /^[\w-]{11}$/;
+const KNOWN_PREFIXES = ["www.", "m.", "music.", "gaming."];
+const YOUTUBE_THUMB_BASE = "https://i3.ytimg.com/vi/";
+const MAXRES_THUMBNAIL = "maxresdefault.jpg";
+const DEFAULT_THUMBNAIL = "hqdefault.jpg";
+
+const thumbnailAvailabilityCache = new Map<string, boolean>();
+
+function normalizeHost(host: string): string {
+  for (const prefix of KNOWN_PREFIXES) {
+    if (host.startsWith(prefix)) {
+      return host.slice(prefix.length);
+    }
+  }
+  return host;
+}
+
+function sanitizeVideoId(id: string | null): string | null {
+  if (!id) return null;
+  return VALID_ID_PATTERN.test(id) ? id : null;
+}
+
+function extractYoutubeVideoId(rawUrl: string): string | null {
+  if (!rawUrl) return null;
+
+  try {
+    const url = new URL(rawUrl);
+    const host = normalizeHost(url.hostname);
+
+    if (host === "youtu.be") {
+      const id = url.pathname.split("/").find(Boolean) ?? null;
+      return sanitizeVideoId(id);
+    }
+
+    if (host.endsWith("youtube.com")) {
+      const paramsId = sanitizeVideoId(url.searchParams.get("v"));
+      if (paramsId) return paramsId;
+
+      const segments = url.pathname.split("/").filter(Boolean);
+      if (!segments.length) return null;
+
+      if (segments[0] === "embed" || segments[0] === "shorts" || segments[0] === "live") {
+        return sanitizeVideoId(segments[1] ?? null);
+      }
+
+      return sanitizeVideoId(segments[segments.length - 1] ?? null);
+    }
+  } catch {
+    // If it's just an 11-character ID passed directly, return it validated
+    if (VALID_ID_PATTERN.test(rawUrl)) {
+      return rawUrl;
+    }
+    return null;
+  }
+
+  return null;
+}
+
+async function isThumbnailAvailable(url: string): Promise<boolean> {
+  if (thumbnailAvailabilityCache.has(url)) {
+    return thumbnailAvailabilityCache.get(url)!;
+  }
+
+  if (typeof fetch !== "function") {
+    return false;
+  }
+
+  try {
+    const response = await fetch(url, { method: "HEAD" });
+    let available = response.ok;
+
+    if (!available && response.status === 405) {
+      const getResponse = await fetch(url, { method: "GET" });
+      available = getResponse.ok;
+    }
+
+    thumbnailAvailabilityCache.set(url, available);
+    return available;
+  } catch {
+    return false;
+  }
+}
+
+async function getYoutubeThumbnail(rawUrl: string): Promise<string> {
+  const id = extractYoutubeVideoId(rawUrl);
+  if (!id) return PLACEHOLDER_THUMBNAIL;
+
+  const baseUrl = `${YOUTUBE_THUMB_BASE}${id}`;
+  const maxResUrl = `${baseUrl}/${MAXRES_THUMBNAIL}`;
+
+  if (await isThumbnailAvailable(maxResUrl)) {
+    return maxResUrl;
+  }
+
+  return `${baseUrl}/${DEFAULT_THUMBNAIL}`;
+}
+
+function getYoutubeEmbedUrl(rawUrl: string): string | null {
+  const id = extractYoutubeVideoId(rawUrl);
+  return id ? `${YOUTUBE_EMBED_BASE}${id}?autoplay=1` : null;
+}
+
+const uiConfig = getUIConfig()
+const videoTheme = uiConfig.colors ? createVideoTheme() : videoThemeDefault
+
+const video = scv(videoTheme)
+
+const {
+  src,
+  title = "YouTube Video Player",
+  icon = "i-lucide-play",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as VideoProps
+
+const classes = resolveClasses(video, {
+  title: !!(Astro.slots.has("title") || title),
+  icon: !!(Astro.slots.has("icon") || icon),
+}, useUi("video", uiProp), className);
+
+const embedUrl = getYoutubeEmbedUrl(src);
+const thumbnail = await getYoutubeThumbnail(src);
+const isPlayable = Boolean(embedUrl);
+const ariaLabel = isPlayable ? "Play YouTube Video" : "YouTube Video Unavailable";
+---
+
+<div
+    class:list={[classes.root]}
+    {...rest}
+>
+  <button
+    type="button"
+    data-youtube-trigger
+    aria-label={ariaLabel}
+    data-embed-url={isPlayable ? embedUrl : undefined}
+    disabled={!isPlayable}
+    data-video-title={title}
+    class:list={[classes.trigger]}
+  >
+    <Image
+      layout="full-width"
+      src={thumbnail}
+      alt={title}
+      width="1280"
+      height="720"
+      loading="lazy"
+      class:list={[classes.image]}
+    />
+
+    <slot name="icon">
+      <span class:list={[classes.icon, icon]} aria-hidden="true" />
+    </slot>
+  </button>
+</div>
+
+<script is:inline>
+  (() => {
+    const root = document.currentScript?.previousElementSibling;
+    if (!(root instanceof HTMLElement)) return;
+
+    const trigger = root.querySelector("[data-youtube-trigger]");
+    if (!(trigger instanceof HTMLButtonElement)) return;
+
+    const embedUrl = trigger.dataset.embedUrl;
+    const title = trigger.dataset.videoTitle;
+    if (!embedUrl) return;
+
+    const activate = () => {
+      const iframe = document.createElement("iframe");
+      iframe.src = embedUrl;
+      iframe.title = title;
+      iframe.allow =
+          "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
+      iframe.allowFullscreen = true;
+      iframe.loading = "lazy";
+      iframe.referrerPolicy = "strict-origin-when-cross-origin";
+      iframe.classList.add("w-full", "h-full", "absolute", "inset-0");
+
+      root.replaceChildren(iframe);
+    };
+
+    trigger.addEventListener("click", activate, { once: true });
+    trigger.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        activate();
+      }
+    }, { once: true });
+  })();
 </script>

package/src/components/astro/RLAWatermark.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { WatermarkProps } from "../../types"
+import watermarkThemeDefault, { createWatermarkTheme } from "../../themes/watermark.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const watermarkTheme = uiConfig.colors ? createWatermarkTheme() : watermarkThemeDefault
+
+const watermark = scv(watermarkTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as WatermarkProps
+
+const classes = resolveClasses(watermark, {}, useUi("watermark", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAWindowMockup.astro

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