@rimelight/ui 0.0.21 → 0.0.23

package/src/components/vue/RLVPlaceholder.vue

@@ -0,0 +1,76 @@
+<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"
+
+const placeholder = scv({
+  slots: [...placeholderTheme.slots],
+  base: placeholderTheme.base,
+  variants: placeholderTheme.variants,
+  compoundVariants: [...placeholderTheme.compoundVariants],
+  defaultVariants: placeholderTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+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.
+   */
+  [key: string]: unknown
+}
+
+const { class: className, ui: uiProp } = defineProps<RLVPlaceholderProps>()
+
+defineSlots<{
+  /**
+   * The default slot for placeholder content.
+   */
+  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()
+</script>
+
+<template>
+  <div :class="twMerge(base, mergedUI.base, className)" v-bind="$attrs">
+    <svg :class="twMerge(svg, mergedUI.svg)">
+      <defs>
+        <pattern
+          id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+          x="0"
+          y="0"
+          width="10"
+          height="10"
+          patternUnits="userSpaceOnUse"
+        >
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+        </pattern>
+      </defs>
+      <rect
+        stroke="none"
+        fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+        width="100%"
+        height="100%"
+      />
+    </svg>
+
+    <slot />
+  </div>
+</template>

package/src/components/vue/RLVScrollToTop.vue

@@ -1,154 +1,214 @@
-<script setup lang="ts">
-import { computed } from "vue"
-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 { useScrollToTop } from "../../composables/useScrollToTop"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-export interface RLVScrollToTopProps {
-  color?: keyof typeof scrollToTopTheme.variants.color
-  circleStrokeWidth?: number
-  duration?: number
-  threshold?: number
-  ui?: Partial<Record<keyof typeof scrollToTopTheme.base, string>>
-  class?: string
-  [key: string]: unknown
-}
-
-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",
-  circleStrokeWidth = 4,
-  duration = 0.1,
-  threshold = 200,
-  ui: uiProp,
-  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>
-
-defineSlots<{
-  default(props: {}): any
-}>()
-
-const { root, button, progressBase, svg: svgClass, iconContainer, icon } = scrollToTop({
-  color
-})
-
-const { isVisible, scrollPercentage, scrollToTop: scrollToTopFn } = useScrollToTop({
-  threshold
-})
-
-const circumference = 2 * Math.PI * 45
-const percentPx = circumference / 100
-
-const currentPercent = computed(() => scrollPercentage.value)
-const percentageInPx = computed(() => `${percentPx}px`)
-const durationInSeconds = computed(() => `${duration}s`)
-</script>
-
-<template>
-  <div
-      :class="[
-      'rla-scroll-to-top fixed bottom-6 right-6 z-50',
-      { 'visible': isVisible },
-      twMerge(root, mergedUI.root, className)
-    ]"
-      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">
-          <circle
-              cx="50"
-              cy="50"
-              r="45"
-              fill="var(--color-primary-950)"
-              :stroke-width="circleStrokeWidth"
-              stroke-dashoffset="0"
-              stroke-linecap="round"
-              class="gauge-secondary-stroke opacity-100"
-          />
-          <circle
-              cx="50"
-              cy="50"
-              r="45"
-              fill="transparent"
-              :stroke-width="circleStrokeWidth"
-              stroke-linecap="round"
-              class="gauge-primary-stroke opacity-100"
-              :style="{ strokeDasharray: `${(currentPercent / 100) * circumference} ${circumference}` }"
-          />
-        </svg>
-        <div :class="twMerge(iconContainer, mergedUI.iconContainer)">
-          <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              :class="twMerge(icon, mergedUI.icon)"
-          >
-            <path d="m5 12 7-7 7 7" />
-            <path d="M12 19V5" />
-          </svg>
-        </div>
-      </div>
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.rla-scroll-to-top {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.3s ease-in-out;
-}
-
-.rla-scroll-to-top.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.progress-circle-base {
-  transform: translateZ(0);
-}
-
-.gauge-primary-stroke {
-  stroke: var(--color-primary-500);
-  transition: stroke-dasharray 0.1s ease, stroke 0.1s ease;
-  transform: rotate(-90deg);
-  transform-origin: center;
-}
-
-.gauge-secondary-stroke {
-  stroke: var(--color-primary-900);
-  stroke-dasharray: 282.6;
-  transform: rotate(-90deg);
-  transform-origin: center;
-}
-</style>
+<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 { useScrollToTop } from "../../composables/useScrollToTop"
+import { computed } from "vue"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+export interface RLVScrollToTopProps {
+  /**
+   * Button color.
+   *
+   * @default "primary"
+   */
+  color?: keyof typeof scrollToTopTheme.variants.color
+  /**
+   * Transition duration for the progress circle (in seconds).
+   *
+   * @default 0.1
+   */
+  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
+}
+
+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,
+  duration = 0.1,
+  threshold = 200,
+  showProgress = false,
+  ui: uiProp,
+  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 {
+  isVisible,
+  scrollPercentage,
+  scrollToTop: scrollToTopFn
+} = useScrollToTop({
+  threshold
+})
+
+const circumference = 2 * Math.PI * 45
+const percentPx = circumference / 100
+
+const currentPercent = computed(() => scrollPercentage.value)
+const percentageInPx = computed(() => `${percentPx}px`)
+const durationInSeconds = computed(() => `${duration}s`)
+</script>
+
+<template>
+  <div
+    :class="[
+      'rla-scroll-to-top fixed bottom-6 right-6 z-50',
+      { visible: isVisible },
+      twMerge(root, mergedUI.root, className)
+    ]"
+    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"
+        >
+          <circle
+            cx="50"
+            cy="50"
+            r="45"
+            fill="var(--color-primary-950)"
+            :stroke-width="progressWidth"
+            stroke-dashoffset="0"
+            stroke-linecap="round"
+            class="gauge-secondary-stroke opacity-100"
+          />
+          <circle
+            v-if="showProgress"
+            cx="50"
+            cy="50"
+            r="45"
+            fill="transparent"
+            :stroke-width="progressWidth"
+            stroke-linecap="round"
+            class="gauge-primary-stroke opacity-100"
+            :style="{
+              '--stroke-percent': currentPercent,
+              '--percent-to-px': percentageInPx,
+              '--circumference': circumference,
+              '--duration': durationInSeconds
+            }"
+          />
+        </svg>
+        <div :class="twMerge(iconContainer, mergedUI.iconContainer)">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            :class="twMerge(icon, mergedUI.icon)"
+          >
+            <path d="m5 12 7-7 7 7" />
+            <path d="M12 19V5" />
+          </svg>
+        </div>
+      </div>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rla-scroll-to-top {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.rla-scroll-to-top.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.progress-circle-base {
+  transform: translateZ(0);
+}
+
+.gauge-primary-stroke {
+  stroke: var(--color-primary-500);
+  --stroke-percent: v-bind(currentPercent);
+  --percent-to-px: v-bind(percentageInPx);
+  --circumference: v-bind(circumference);
+  stroke-dasharray: calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference);
+  transition:
+    stroke-dasharray v-bind(durationInSeconds) ease,
+    stroke v-bind(durationInSeconds) ease;
+  transform: rotate(-90deg);
+  transform-origin: center;
+  shape-rendering: geometricPrecision;
+}
+
+.gauge-secondary-stroke {
+  stroke: var(--color-primary-900);
+  stroke-dasharray: 282.6;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+</style>

package/src/integrations/ui.ts

@@ -3,7 +3,6 @@ import UnoCSS from "unocss/astro"
 import vue from "@astrojs/vue"
 import uiPlugin from "@nuxt/ui/vite"
 import defu from "defu"
-import Icons from "unplugin-icons/vite"
 import tailwindcss from "@tailwindcss/vite"
 import { defaultUIConfig } from "../themes"
 
@@ -11,12 +10,28 @@ import { defaultUIConfig } from "../themes"
  * Shape of the `ui` config that can be passed to the integration.
  */
 export type UIConfigOverrides = {
-  button?: Partial<(typeof defaultUIConfig)["button"]>
-  header?: Partial<(typeof defaultUIConfig)["header"]>
+  "button"?: Partial<(typeof defaultUIConfig)["button"]>
+  "header"?: Partial<(typeof defaultUIConfig)["header"]>
   "scroll-to-top"?: Partial<(typeof defaultUIConfig)["scroll-to-top"]>
+  "logo"?: Partial<(typeof defaultUIConfig)["logo"]>
 }
 
 export interface UIOptions {
+  /**
+   * Configuration for the Logo component variants.
+   */
+  logos?: Record<
+    string,
+    | string
+    | {
+        light?: string
+        dark?: string
+        color?: string
+        white?: string
+        black?: string
+        [key: string]: string | undefined
+      }
+  >
   /**
    * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
    * wins).
@@ -47,7 +62,8 @@ export interface UIOptions {
  *   })
  */
 export function ui(options: UIOptions = {}): AstroIntegration[] {
-  const resolvedConfig = defu(options.ui ?? {}, defaultUIConfig)
+  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
+  const resolvedConfig = { ...resolvedUI, logos: options.logos ?? {} }
 
   const virtualModuleId = "virtual:rimelight-ui"
   const resolvedVirtualModuleId = "\0" + virtualModuleId
@@ -74,10 +90,6 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
             router: false,
             scanPackages: ["@rimelight/ui"]
           }),
-          Icons({
-            compiler: "astro",
-            autoInstall: true
-          }),
           tailwindcss(),
           {
             name: "vite-plugin-rimelight-ui-config",

package/src/plugins/index.ts

@@ -1,2 +1,2 @@
-export { default as starlightAddons } from "../plugins/starlightAddons"
-export type { StarlightAddonsConfig } from "../plugins/starlightAddons"
+export { default as starlightAddons } from "../plugins/starlightAddons"
+export type { StarlightAddonsConfig } from "../plugins/starlightAddons"