@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLAProse.astro

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

package/src/components/astro/RLAQrCode.astro

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

package/src/components/astro/RLAQuote.astro

@@ -1,15 +0,0 @@
----
-
----
-
-<figure class="relative my-8 border-y-[3px] border-astro-gray-500 py-4">
-    <span class="i-lucide-quote mb-2 s-10 md:absolute md:right-[calc(100%+1rem)] md:top-6" />
-    <blockquote
-            class="font-heading heading-3 text-xl font-medium text-white md:text-[32px] md:leading-[40px]"
-    >
-        <slot name="quote" />
-    </blockquote>
-    <figcaption class="font-mono mt-4 text-right text-astro-pink-light">
-        <slot name="caption" />
-    </figcaption>
-</figure>

package/src/components/astro/RLARadioGroup.astro

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

package/src/components/astro/RLARating.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { RatingProps } from "../../types"
-import ratingThemeDefault, { createRatingTheme } from "../../themes/rating.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const ratingTheme = uiConfig.colors ? createRatingTheme() : ratingThemeDefault
-
-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/astro/RLAScrollArea.astro

@@ -1,160 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ScrollAreaProps } from "../../types"
-import scrollAreaThemeDefault, { createScrollAreaTheme } from "../../themes/scroll-area.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const scrollAreaTheme = uiConfig.colors ? createScrollAreaTheme() : scrollAreaThemeDefault
-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/astro/RLAScrollToTop.astro

@@ -1,191 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ScrollToTopProps } from "../../types"
-import scrollToTopThemeDefault, { createScrollToTopTheme } from "../../themes/scroll-to-top.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const scrollToTopTheme = uiConfig.colors ? createScrollToTopTheme(uiConfig.colors) : scrollToTopThemeDefault
-
-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>