@rimelight/ui 0.0.30 → 0.0.32

package/src/components/astro/RLAScrollArea.astro

@@ -0,0 +1,157 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ScrollAreaProps } from "../../types"
+import scrollAreaThemeDefault, { createScrollAreaTheme } from "../../themes/scroll-area.theme"
+
+const scrollAreaTheme = 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,159 +1,172 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ScrollToTopProps } from "../../types"
-import scrollToTopTheme from "../../themes/scroll-to-top.theme"
-
-const scrollToTop = scv(scrollToTopTheme)
-
-const {
-  color = "primary",
-  progressWidth = 6,
-  duration = 0.1,
-  threshold = 200,
-  showProgress = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ScrollToTopProps
-
-const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
-
-const circumference = 2 * Math.PI * 45
-const percentPx = circumference / 100
----
-
-<div
-  class:list={["rla-scroll-to-top", "fixed bottom-6 right-6 z-50", classes.root]}
-  data-threshold={threshold}
-  data-duration={duration}
-  data-circle-stroke-width={progressWidth}
-  {...rest}
->
-  <button
-    type="button"
-    class={classes.button}
-    aria-label="Scroll to top"
-    data-scroll-to-top-button
-  >
-    <div class={classes.progressBase}>
-      <svg class={classes.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"
-        />
-        {showProgress && (
-        <circle
-          cx="50"
-          cy="50"
-          r="45"
-          fill="transparent"
-          stroke-width={progressWidth}
-          stroke-dashoffset="0"
-          stroke-linecap="round"
-          class="gauge-primary-stroke opacity-100"
-          data-progress-circle
-          style={`--stroke-percent: 0; --percent-to-px: ${percentPx}px; --circumference: ${circumference}; --duration: ${duration}s`}
-        />
-        )}
-      </svg>
-      <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>
-
-<script>
-  document.querySelectorAll('.rla-scroll-to-top').forEach((el) => {
-    const element = el as HTMLElement
-    const button = element.querySelector('[data-scroll-to-top-button]') as HTMLButtonElement | null
-    const progressCircle = element.querySelector('[data-progress-circle]') as SVGCircleElement | null
-
-    if (!button) return
-
-    const threshold = Number(element.dataset.threshold) || 200
-
-    function updateScrollState() {
-      const scrollTop = window.scrollY || document.documentElement.scrollTop
-      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
-      const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
-
-      if (scrollTop > threshold) {
-        element.classList.add('visible')
-      } else {
-        element.classList.remove('visible')
-      }
-
-      if (progressCircle) {
-        const circumference = 2 * Math.PI * 45
-        const percentPx = circumference / 100
-        const duration = element.dataset.duration || '0.1'
-        progressCircle.style.setProperty('--stroke-percent', scrollPercentage.toString())
-        progressCircle.style.setProperty('--percent-to-px', `${percentPx}px`)
-        progressCircle.style.setProperty('--circumference', circumference.toString())
-        progressCircle.style.setProperty('--duration', `${duration}s`)
-      }
-    }
-
-    button.addEventListener('click', () => {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-    })
-
-    window.addEventListener('scroll', updateScrollState, { passive: true })
-    updateScrollState()
-  })
-</script>
-
-<style>
-  .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-dasharray: calc(var(--stroke-percent, 0) * var(--percent-to-px, 2.826px)) var(--circumference, 282.6);
-    transition: stroke-dasharray var(--duration, 0.1s) ease, stroke var(--duration, 0.1s) 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>
+---
+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)
+
+const circumference = 2 * Math.PI * 45
+const percentPx = circumference / 100
+
+
+---
+
+<div
+  class:list={["rla-scroll-to-top", "fixed bottom-6 right-6 z-50", classes.root]}
+  data-threshold={threshold}
+  data-duration={duration}
+  data-circle-stroke-width={progressWidth}
+  {...rest}
+>
+  <button
+    type="button"
+    class={classes.button}
+    aria-label="Scroll to top"
+    data-scroll-to-top-button
+  >
+    <div class={classes.progressBase}>
+      <svg class={classes.svg} viewBox="0 0 100 100" shape-rendering="geometricPrecision">
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          stroke={`var(--color-${color}-900)`}
+          fill={`var(--color-${color}-950)`}
+          stroke-width={progressWidth}
+          stroke-dashoffset="0"
+          stroke-linecap="round"
+          class="gauge-secondary-stroke opacity-100"
+        />
+        {showProgress && (
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="transparent"
+          stroke={`var(--color-${color}-500)`}
+          stroke-width={progressWidth}
+          stroke-dashoffset="0"
+          stroke-linecap="round"
+          class="gauge-primary-stroke opacity-100"
+          data-progress-circle
+        />
+        )}
+      </svg>
+      <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>
+
+<script>
+  document.querySelectorAll('.rla-scroll-to-top').forEach((el) => {
+    const element = el as HTMLElement
+    const button = element.querySelector('[data-scroll-to-top-button]') as HTMLButtonElement | null
+    const progressCircle = element.querySelector('[data-progress-circle]') as SVGCircleElement | null
+
+    if (!button) return
+
+    const threshold = Number(element.dataset.threshold) || 200
+
+    function updateScrollState() {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop
+      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
+      const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
+
+      if (scrollTop > threshold) {
+        element.classList.add('visible')
+      } else {
+        element.classList.remove('visible')
+      }
+
+      if (progressCircle) {
+        const circumference = 2 * Math.PI * 45
+        const percentPx = circumference / 100
+        const duration = element.dataset.duration || '0.1'
+        progressCircle.style.setProperty('--stroke-percent', scrollPercentage.toString())
+        progressCircle.style.setProperty('--percent-to-px', `${percentPx}px`)
+        progressCircle.style.setProperty('--circumference', circumference.toString())
+        progressCircle.style.setProperty('--duration', `${duration}s`)
+      }
+    }
+
+    button.addEventListener('click', () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    })
+
+    window.addEventListener('scroll', updateScrollState, { passive: true })
+    updateScrollState()
+  })
+</script>
+
+<style>
+  .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-dasharray: calc(var(--stroke-percent, 0) * var(--percent-to-px, 2.826px)) var(--circumference, 282.6);
+    transition: stroke-dasharray var(--duration, 0.1s) ease, stroke var(--duration, 0.1s) ease;
+    transform: rotate(-90deg);
+    transform-origin: center;
+    shape-rendering: geometricPrecision;
+  }
+
+  .gauge-secondary-stroke {
+    stroke-dasharray: 282.6;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+
+  [data-progress-circle] {
+    --stroke-percent: 0;
+    --percent-to-px: 2.826px;
+    --circumference: 282.6;
+    --duration: 0.1s;
+  }
+</style>

package/src/components/astro/RLASelect.astro

@@ -0,0 +1,109 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SelectProps } from "../../types"
+import selectThemeDefault, { createSelectTheme } from "../../themes/select.theme"
+
+const selectTheme = selectThemeDefault
+const select = scv(selectTheme)
+
+const {
+  items = [],
+  value = "",
+  placeholder = "Select item...",
+  disabled = false,
+  name,
+  label,
+  size = "md",
+  color = "primary",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SelectProps
+
+const classes = resolveClasses(select, {
+  size
+}, useUi("select", uiProp), className);
+
+const normalizedItems = items.map(item => {
+  if (typeof item === "string") {
+    return { label: item, value: item }
+  }
+  return item
+})
+
+const selectedItem = normalizedItems.find(item => item.value === value)
+const initialLabel = selectedItem ? selectedItem.label : ""
+---
+<div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
+  {label && <label class={classes.label} data-slot="label">{label}</label>}
+  
+  <div class="relative w-full" data-select-wrapper>
+    <button
+      type="button"
+      class={classes.trigger}
+      data-slot="trigger"
+      disabled={disabled}
+      data-select-trigger
+      {...rest}
+    >
+      <span data-select-value>{initialLabel || placeholder}</span>
+      <span class="i-lucide-chevron-down opacity-50" />
+    </button>
+
+    <div class={classes.content + " hidden"} data-select-dropdown data-slot="content">
+      <div class="py-1" data-select-items>
+        {normalizedItems.map(item => (
+          <div
+            class={classes.item}
+            data-slot="item"
+            data-value={item.value}
+            data-label={item.label}
+            data-select-item
+          >
+            <span class={classes.itemText}>{item.label}</span>
+            <span class={classes.itemIcon + " hidden i-lucide-check"} data-check-icon />
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+  <input type="hidden" name={name} value={value} data-select-hidden-input />
+</div>
+
+<script>
+  document.querySelectorAll("[data-select-wrapper]").forEach(wrapper => {
+    const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
+    const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
+    const items = wrapper.querySelectorAll("[data-select-item]");
+    const valueSpan = wrapper.querySelector("[data-select-value]");
+    const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-select-hidden-input]") as HTMLInputElement;
+
+    if (!trigger || !dropdown) return;
+
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      dropdown.classList.toggle("hidden");
+    });
+
+    items.forEach(item => {
+      item.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const val = (item as HTMLElement).dataset.value || "";
+        const label = (item as HTMLElement).dataset.label || "";
+        
+        if (hiddenInput) hiddenInput.value = val;
+        if (valueSpan) valueSpan.textContent = label;
+        
+        items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
+        item.querySelector("[data-check-icon]")?.classList.remove("hidden");
+        
+        dropdown.classList.add("hidden");
+      });
+    });
+
+    document.addEventListener("click", () => {
+      dropdown.classList.add("hidden");
+    });
+  });
+</script>

package/src/components/astro/RLASeparator.astro

@@ -0,0 +1,27 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SeparatorProps } from "../../types"
+import separatorTheme from "../../themes/separator.theme"
+
+const separator = scv(separatorTheme)
+
+const {
+  orientation = "horizontal",
+  decorative = true,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SeparatorProps
+
+const classes = resolveClasses(separator, {
+  orientation
+}, useUi("separator", uiProp), className)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role={decorative ? "none" : "separator"}
+  aria-orientation={decorative ? undefined : orientation}
+  {...rest}
+/>