@rimelight/ui 0.0.37 → 0.0.39

package/src/components/rating/RLARating.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { RatingProps } from "./rating"
+import ratingTheme from "./rating.theme"
+
+
+const rating = scv(ratingTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RatingProps
+
+const classes = resolveClasses(rating, {}, useUi("rating", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/rating/rating.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createRatingTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createRatingTheme()

package/src/components/scroll-area/RLAScrollArea.astro

@@ -0,0 +1,158 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ScrollAreaProps } from "./scroll-area"
+import scrollAreaTheme from "./scroll-area.theme"
+
+
+const scrollArea = scv(scrollAreaTheme)
+
+const {
+  orientation = "vertical",
+  scrollHideDelay = 600,
+  height,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ScrollAreaProps
+
+const classes = resolveClasses(scrollArea, {
+  orientation
+}, useUi("scrollArea", uiProp), className)
+
+const heightStyle = height
+  ? `height:${typeof height === "number" ? `${height}px` : height}`
+  : undefined
+---
+
+<div
+  class={classes.root}
+  data-slot="root"
+  data-scroll-area
+  data-orientation={orientation}
+  data-hide-delay={scrollHideDelay}
+  style={heightStyle}
+  {...rest}
+>
+  {/* Scrollable viewport */}
+  <div
+    class={classes.viewport}
+    data-slot="viewport"
+    data-scroll-viewport
+  >
+    <slot />
+  </div>
+
+  {/* Vertical scrollbar */}
+  {(orientation === "vertical" || orientation === "both") && (
+    <div
+      class={classes.scrollbar + " opacity-0 transition-opacity"}
+      data-slot="scrollbar"
+      data-scroll-bar="vertical"
+      aria-hidden="true"
+    >
+      <div class={classes.thumb} data-scroll-thumb="vertical" />
+    </div>
+  )}
+
+  {/* Horizontal scrollbar */}
+  {(orientation === "horizontal" || orientation === "both") && (
+    <div
+      class={"absolute bottom-0 left-0 right-0 h-2.5 flex-row flex p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10 opacity-0 transition-opacity"}
+      data-slot="scrollbar"
+      data-scroll-bar="horizontal"
+      aria-hidden="true"
+    >
+      <div class={classes.thumb} data-scroll-thumb="horizontal" />
+    </div>
+  )}
+</div>
+
+<script>
+  document.querySelectorAll("[data-scroll-area]").forEach(area => {
+    const viewport = area.querySelector("[data-scroll-viewport]") as HTMLElement | null;
+    if (!viewport) return;
+
+    const hideDelay = parseInt((area as HTMLElement).dataset.hideDelay ?? "600", 10);
+
+    const vBar = area.querySelector("[data-scroll-bar='vertical']") as HTMLElement | null;
+    const hBar = area.querySelector("[data-scroll-bar='horizontal']") as HTMLElement | null;
+    const vThumb = area.querySelector("[data-scroll-thumb='vertical']") as HTMLElement | null;
+    const hThumb = area.querySelector("[data-scroll-thumb='horizontal']") as HTMLElement | null;
+
+    let hideTimer: ReturnType<typeof setTimeout>;
+
+    const showBars = () => {
+      vBar?.classList.replace("opacity-0", "opacity-100");
+      hBar?.classList.replace("opacity-0", "opacity-100");
+    };
+
+    const hideBars = () => {
+      hideTimer = setTimeout(() => {
+        vBar?.classList.replace("opacity-100", "opacity-0");
+        hBar?.classList.replace("opacity-100", "opacity-0");
+      }, hideDelay);
+    };
+
+    const updateThumbs = () => {
+      if (vThumb) {
+        const ratio = viewport.clientHeight / viewport.scrollHeight;
+        const thumbH = Math.max(ratio * (vBar?.clientHeight ?? 0), 20);
+        const thumbTop = (viewport.scrollTop / viewport.scrollHeight) * (vBar?.clientHeight ?? 0);
+        vThumb.style.height = `${thumbH}px`;
+        vThumb.style.transform = `translateY(${thumbTop}px)`;
+      }
+      if (hThumb) {
+        const ratio = viewport.clientWidth / viewport.scrollWidth;
+        const thumbW = Math.max(ratio * (hBar?.clientWidth ?? 0), 20);
+        const thumbLeft = (viewport.scrollLeft / viewport.scrollWidth) * (hBar?.clientWidth ?? 0);
+        hThumb.style.width = `${thumbW}px`;
+        hThumb.style.transform = `translateX(${thumbLeft}px)`;
+      }
+    };
+
+    viewport.addEventListener("scroll", () => {
+      clearTimeout(hideTimer);
+      showBars();
+      updateThumbs();
+      hideBars();
+    });
+
+    // Drag-to-scroll for custom thumbs
+    const makeDraggable = (
+      thumb: HTMLElement | null,
+      scrollProp: "scrollTop" | "scrollLeft",
+      clientProp: "clientY" | "clientX",
+      sizeProp: "scrollHeight" | "scrollWidth",
+      clientSizeProp: "clientHeight" | "clientWidth"
+    ) => {
+      if (!thumb) return;
+      let startPos = 0;
+      let startScroll = 0;
+
+      thumb.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        startPos = (e as MouseEvent)[clientProp];
+        startScroll = viewport[scrollProp];
+
+        const onMove = (ev: MouseEvent) => {
+          const delta = ev[clientProp] - startPos;
+          const ratio = viewport[sizeProp] / viewport[clientSizeProp];
+          viewport[scrollProp] = startScroll + delta * ratio;
+        };
+        const onUp = () => {
+          document.removeEventListener("mousemove", onMove);
+          document.removeEventListener("mouseup", onUp);
+        };
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+      });
+    };
+
+    makeDraggable(vThumb, "scrollTop", "clientY", "scrollHeight", "clientHeight");
+    makeDraggable(hThumb, "scrollLeft", "clientX", "scrollWidth", "clientWidth");
+
+    updateThumbs();
+  });
+</script>

package/src/components/scroll-area/scroll-area.theme.ts

@@ -0,0 +1,26 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createScrollAreaTheme = () =>
+  defineTheme({
+    slots: ["root", "viewport", "scrollbar", "thumb"],
+    base: {
+      root: "relative overflow-hidden w-full",
+      viewport:
+        "h-full w-full rounded-[inherit] overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+      scrollbar:
+        "absolute flex user-select-none touch-action-none p-0.5 bg-transparent transition-colors duration-150 ease-out hover:bg-muted/10",
+      thumb: "relative flex-1 rounded-full bg-border transition-colors hover:bg-muted-foreground/45"
+    },
+    variants: {
+      orientation: {
+        vertical: { scrollbar: "right-0 top-0 bottom-0 w-2.5 flex-col" },
+        horizontal: { scrollbar: "bottom-0 left-0 right-0 h-2.5 flex-row" },
+        both: { scrollbar: "" }
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  })
+
+export default createScrollAreaTheme()

package/src/components/scroll-to-top/RLAScrollToTop.astro

@@ -0,0 +1,189 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ScrollToTopProps } from "./scroll-to-top"
+import scrollToTopTheme from "./scroll-to-top.theme"
+
+
+const scrollToTop = scv(scrollToTopTheme)
+
+const {
+  color = "primary",
+  progressWidth = 6,
+  duration = 0.1,
+  threshold = 200,
+  showProgress = false,
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ScrollToTopProps
+
+const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop", uiProp), className)
+
+---
+
+<rla-scroll-to-top data-threshold={threshold} data-duration={duration} data-color={color} data-progress-width={progressWidth} {...rest}>
+  <div
+    class:list={["rla-scroll-to-top-inner", "fixed bottom-6 right-6 z-50", classes.root]}
+  >
+    <button
+      type="button"
+      class={classes.button}
+      aria-label="Scroll to top"
+      data-scroll-to-top-button
+    >
+      <div class={classes.progressBase}>
+        <div class="gauge-track"></div>
+        {showProgress && (
+        <div class="gauge-progress" data-gauge-progress></div>
+        )}
+        <div class={classes.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={classes.icon}
+          >
+            <path d="m5 12 7-7 7 7" />
+            <path d="M12 19V5" />
+          </svg>
+        </div>
+      </div>
+    </button>
+  </div>
+</rla-scroll-to-top>
+
+<script>
+  import { trackScroll, scrollToTop } from "../../utils/scroll"
+
+  class RLAScrollToTop extends HTMLElement {
+    private cleanupScroll: (() => void) | null = null;
+    private styleEl: HTMLStyleElement | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const button = this.querySelector('[data-scroll-to-top-button]');
+      const innerElement = this.querySelector('.rla-scroll-to-top-inner') as HTMLElement | null;
+
+      if (!button || !innerElement) return;
+
+      const id = ++RLAScrollToTop.instanceCounter;
+      const threshold = Number(this.dataset.threshold) || 200;
+      const color = this.dataset.color || 'primary';
+      const progressWidth = Number(this.dataset.progressWidth) || 6;
+      const gaugeBorderWidth = progressWidth * 0.5;
+      const nonce = (document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') ?? '');
+
+      const getStyleEl = () => {
+        if (!this.styleEl) {
+          this.styleEl = document.createElement('style');
+          if (nonce) this.styleEl.setAttribute('nonce', nonce);
+          document.head.appendChild(this.styleEl);
+        }
+        return this.styleEl;
+      };
+
+      innerElement.dataset.rlaInstance = String(id);
+
+      button.addEventListener('click', scrollToTop);
+
+      const unsubscribe = trackScroll({ threshold }, (state) => {
+        if (state.isVisible) {
+          innerElement.classList.add('visible');
+        } else {
+          innerElement.classList.remove('visible');
+        }
+
+        getStyleEl().textContent = `
+          .rla-scroll-to-top-inner[data-rla-instance="${id}"] .gauge-track {
+            border-width: ${gaugeBorderWidth}px;
+            border-color: var(--color-${color}-900);
+            background-color: #000;
+          }
+          .rla-scroll-to-top-inner[data-rla-instance="${id}"] .gauge-progress {
+            --gauge-progress: ${state.scrollPercentage};
+            --gauge-stroke-width: ${gaugeBorderWidth}px;
+            --gauge-color: var(--color-${color}-500);
+          }
+        `;
+      });
+
+      this.cleanupScroll = () => {
+        button.removeEventListener('click', scrollToTop);
+        unsubscribe();
+        if (this.styleEl) {
+          this.styleEl.remove();
+          this.styleEl = null;
+        }
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.cleanupScroll) {
+        this.cleanupScroll();
+        this.cleanupScroll = null;
+      }
+    }
+
+    static instanceCounter = 0;
+  }
+
+  if (!customElements.get('rla-scroll-to-top')) {
+    customElements.define('rla-scroll-to-top', RLAScrollToTop);
+  }
+</script>
+
+<style>
+  .rla-scroll-to-top-inner {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  .rla-scroll-to-top-inner.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .progress-circle-base {
+    position: relative;
+    transform: translateZ(0);
+  }
+
+  .gauge-track {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border-style: solid;
+  }
+
+  .gauge-progress {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: conic-gradient(
+      from 0deg,
+      var(--gauge-color, var(--color-primary-500)) 0deg,
+      var(--gauge-color, var(--color-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
+      transparent calc(var(--gauge-progress, 0) * 3.6deg)
+    );
+    -webkit-mask: radial-gradient(
+      circle closest-side,
+      transparent calc(100% - var(--gauge-stroke-width, 6px)),
+      #000 calc(100% - var(--gauge-stroke-width, 6px))
+    );
+    mask: radial-gradient(
+      circle closest-side,
+      transparent calc(100% - var(--gauge-stroke-width, 6px)),
+      #000 calc(100% - var(--gauge-stroke-width, 6px))
+    );
+  }
+</style>

package/src/components/scroll-to-top/RLVScrollToTop.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ScrollToTopProps } from "./scroll-to-top"
+import scrollToTopTheme from "./scroll-to-top.theme"
+import { trackScroll, scrollToTop as scrollToTopFn } from "../../utils/scroll"
+import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from "vue"
+
+const attrs = useAttrs()
+const scrollToTop = scv(scrollToTopTheme)
+
+const {
+  color = "primary",
+  progressWidth = 6,
+  duration = 0.1,
+  threshold = 200,
+  showProgress = false,
+  ui: uiProp,
+  class: className
+} = defineProps<ScrollToTopProps>()
+
+const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
+
+const isVisible = ref(false)
+const scrollPercentage = ref(0)
+
+const instanceId = `rla-vue-${Math.random().toString(36).slice(2, 8)}`
+const gaugeBorderWidth = progressWidth * 0.5
+
+let styleEl: HTMLStyleElement | null = null
+
+function updateCssVars() {
+  if (!styleEl) return
+  styleEl.textContent = `
+    [data-rla-instance="${instanceId}"] {
+      --gauge-track-border-color: var(--color-${color}-900);
+      --gauge-track-bg: var(--color-${color}-950);
+      --gauge-stroke-width: ${gaugeBorderWidth}px;
+      --gauge-color: var(--color-${color}-500);
+      --gauge-progress: ${scrollPercentage.value};
+    }
+  `
+}
+
+watch(scrollPercentage, updateCssVars)
+
+let unsubscribe: (() => void) | null = null
+
+onMounted(() => {
+  const nonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute("content") ?? ""
+  styleEl = document.createElement("style")
+  if (nonce) styleEl.setAttribute("nonce", nonce)
+  document.head.appendChild(styleEl)
+
+  unsubscribe = trackScroll({ threshold }, (state) => {
+    isVisible.value = state.isVisible
+    scrollPercentage.value = state.scrollPercentage
+  })
+})
+
+onUnmounted(() => {
+  if (styleEl) styleEl.remove()
+  unsubscribe?.()
+})
+</script>
+
+<template>
+  <div
+    :data-rla-instance="instanceId"
+    :class="['rla-scroll-to-top fixed bottom-6 right-6 z-50', { visible: isVisible }, classes.root]"
+    v-bind="attrs"
+  >
+    <button type="button" :class="classes.button" aria-label="Scroll to top" @click="scrollToTopFn">
+      <div :class="classes.progressBase">
+        <div class="gauge-track"></div>
+        <div v-if="showProgress" class="gauge-progress"></div>
+        <div :class="classes.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="classes.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 {
+  position: relative;
+  transform: translateZ(0);
+}
+
+.gauge-track {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: var(--gauge-stroke-width, 3px);
+  border-color: var(--gauge-track-border-color, var(--color-primary-900));
+  background-color: var(--gauge-track-bg, var(--color-primary-950));
+}
+
+.gauge-progress {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    var(--gauge-color, var(--color-primary-500)) 0deg,
+    var(--gauge-color, var(--color-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
+    transparent calc(var(--gauge-progress, 0) * 3.6deg)
+  );
+  -webkit-mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--gauge-stroke-width, 3px)),
+    #000 calc(100% - var(--gauge-stroke-width, 3px))
+  );
+  mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--gauge-stroke-width, 3px)),
+    #000 calc(100% - var(--gauge-stroke-width, 3px))
+  );
+}
+</style>

package/src/components/scroll-to-top/scroll-to-top.theme.ts

@@ -0,0 +1,51 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createScrollToTopTheme = (colors: readonly string[] = ["primary", "secondary"]) =>
+  defineTheme({
+    slots: ["root", "button", "progressBase", "svg", "iconContainer", "icon"],
+    base: {
+      root: "fixed bottom-6 right-6 z-50",
+      button: "size-14 lg:size-12 p-0 rounded-full bg-black/85",
+      progressBase: "progress-circle-base size-full",
+      svg: "size-full",
+      iconContainer: "absolute inset-0 flex items-center justify-center text-center",
+      icon: "size-6 text-white"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            progressBase: "",
+            svg: "",
+            iconContainer: "",
+            icon: ""
+          }
+        ])
+      ),
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      {
+        color: "primary",
+        classNames: {
+          icon: "text-primary-foreground"
+        }
+      },
+      {
+        color: "secondary",
+        classNames: {
+          icon: "text-secondary-foreground"
+        }
+      }
+    ],
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createScrollToTopTheme()

package/src/components/scroll-to-top/scroll-to-top.ts

@@ -0,0 +1,37 @@
+import type { Theme, ThemeColor } from "../../types/component"
+
+export interface ScrollToTopProps {
+  /**
+   * The color scheme applied to the scroll-to-top button.
+   */
+  color?: ThemeColor
+  /**
+   * The width of the progress indicator line.
+   */
+  progressWidth?: number
+  /**
+   * The duration of the scroll-to-top animation in milliseconds.
+   */
+  duration?: number
+  /**
+   * The scroll threshold in pixels before showing the button.
+   */
+  threshold?: number
+  /**
+   * Whether to show the scroll progress indicator.
+   */
+  showProgress?: boolean
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}