@rimelight/ui 0.0.29 → 0.0.31

package/src/components/astro/RLAResizable.astro

@@ -0,0 +1,177 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ResizableProps } from "../../types"
+import resizableThemeDefault, { createResizableTheme } from "../../themes/resizable.theme"
+
+const resizableTheme = resizableThemeDefault
+const resizable = scv(resizableTheme)
+
+const {
+  direction = "horizontal",
+  defaultSizes = [50, 50],
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ResizableProps
+
+const classes = resolveClasses(resizable, {
+  direction
+}, useUi("resizable", uiProp), className)
+
+// Normalise sizes so they sum to 100
+const total = defaultSizes.reduce((s, v) => s + v, 0)
+const sizes = defaultSizes.map(s => (s / (total || 100)) * 100)
+
+const panelCount = sizes.length
+---
+
+<div
+  class={classes.root}
+  data-slot="root"
+  data-resizable
+  data-direction={direction}
+  {...rest}
+>
+  {sizes.map((size, i) => (
+    <>
+      <div
+        class={classes.panel}
+        data-slot="panel"
+        data-resizable-panel={i}
+        style={direction === "horizontal" ? `width:${size}%` : `height:${size}%`}
+      >
+        <slot name={`panel-${i}`}>
+          {i === 0
+            ? <slot />
+            : <slot name="panel" />
+          }
+        </slot>
+      </div>
+
+      {/* Render a handle between panels, not after the last one */}
+      {i < panelCount - 1 && (
+        <div
+          class={classes.handle}
+          data-slot="handle"
+          data-resizable-handle={i}
+          role="separator"
+          aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
+          tabindex={0}
+          aria-label="Resize panels"
+        >
+          <span
+            class={
+              direction === "horizontal"
+                ? "i-lucide-grip-vertical size-3.5 text-muted-foreground/50"
+                : "i-lucide-grip-horizontal size-3.5 text-muted-foreground/50"
+            }
+            aria-hidden="true"
+          />
+        </div>
+      )}
+    </>
+  ))}
+</div>
+
+<script>
+  document.querySelectorAll("[data-resizable]").forEach(container => {
+    const direction = (container as HTMLElement).dataset.direction ?? "horizontal";
+    const isHorizontal = direction === "horizontal";
+
+    const panels = Array.from(
+      container.querySelectorAll("[data-resizable-panel]")
+    ) as HTMLElement[];
+
+    const handles = Array.from(
+      container.querySelectorAll("[data-resizable-handle]")
+    ) as HTMLElement[];
+
+    handles.forEach((handle, idx) => {
+      const panelA = panels[idx];
+      const panelB = panels[idx + 1];
+      if (!panelA || !panelB) return;
+
+      const containerSize = () =>
+        isHorizontal
+          ? (container as HTMLElement).clientWidth
+          : (container as HTMLElement).clientHeight;
+
+      let isDragging = false;
+      let startPos = 0;
+      let startASize = 0;
+      let startBSize = 0;
+
+      const getSize = (el: HTMLElement) =>
+        isHorizontal ? el.offsetWidth : el.offsetHeight;
+
+      const setSize = (el: HTMLElement, px: number) => {
+        const pct = (px / containerSize()) * 100;
+        if (isHorizontal) {
+          el.style.width = `${pct}%`;
+        } else {
+          el.style.height = `${pct}%`;
+        }
+      };
+
+      const onMouseMove = (e: MouseEvent) => {
+        if (!isDragging) return;
+        const delta = isHorizontal
+          ? e.clientX - startPos
+          : e.clientY - startPos;
+
+        const newASize = Math.max(48, startASize + delta);
+        const newBSize = Math.max(48, startBSize - delta);
+
+        // Only resize if both panels have enough space
+        if (startASize + startBSize - newASize < 48) return;
+
+        setSize(panelA, newASize);
+        setSize(panelB, newBSize);
+      };
+
+      const onMouseUp = () => {
+        isDragging = false;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        handle.classList.remove("bg-primary/30");
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+
+      handle.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        isDragging = true;
+        startPos = isHorizontal ? e.clientX : e.clientY;
+        startASize = getSize(panelA);
+        startBSize = getSize(panelB);
+        document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
+        handle.classList.add("bg-primary/30");
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      });
+
+      // Keyboard resize: arrow keys shift by 2%
+      handle.addEventListener("keydown", (e) => {
+        const step = containerSize() * 0.02;
+        const forward = isHorizontal
+          ? e.key === "ArrowRight"
+          : e.key === "ArrowDown";
+        const backward = isHorizontal
+          ? e.key === "ArrowLeft"
+          : e.key === "ArrowUp";
+
+        if (!forward && !backward) return;
+        e.preventDefault();
+
+        const aSize = getSize(panelA);
+        const bSize = getSize(panelB);
+        const delta = forward ? step : -step;
+
+        setSize(panelA, Math.max(48, aSize + delta));
+        setSize(panelB, Math.max(48, bSize - delta));
+      });
+    });
+  });
+</script>

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/scrollArea.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/RLASection.astro

@@ -43,7 +43,6 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
 
 <Tag
   data-orientation={orientation}
-  data-slot="root"
   class:list={[classes.root]}
   {...rest}
 >

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}
+/>

package/src/components/astro/RLASheet.astro

@@ -0,0 +1,72 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SheetProps } from "../../types"
+import sheetTheme from "../../themes/sheet.theme"
+
+const sheet = scv(sheetTheme)
+
+const {
+  side = "right",
+  title,
+  description,
+  triggerLabel,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SheetProps
+
+const classes = resolveClasses(sheet, {
+  side
+}, useUi("sheet", uiProp), className)
+
+const dialogId = `rla-sheet-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="sheet-container">
+  {triggerLabel ? (
+    <button
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').showModal()`}
+    >
+      {triggerLabel}
+    </button>
+  ) : (
+    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={dialogId}
+    class={classes.content}
+    data-slot="content"
+    data-close-on-click-outside="true"
+    {...rest}
+  >
+    <button
+      class={classes.closeButton}
+      data-slot="close-button"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').close()`}
+      aria-label="Close sheet"
+    >
+      <span class="i-lucide-x size-4" aria-hidden="true" />
+    </button>
+
+    <div class={classes.header} data-slot="header">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      <slot name="title" />
+      
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot name="description" />
+    </div>
+
+    <slot />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</div>

package/src/components/astro/RLASidebar.astro

@@ -0,0 +1,135 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SidebarProps, SidebarItem } from "../../types"
+import sidebarThemeDefault, { createSidebarTheme } from "../../themes/sidebar.theme"
+
+const sidebarTheme = sidebarThemeDefault
+const sidebar = scv(sidebarTheme)
+
+const {
+  items = [],
+  side = "left",
+  collapsible = "none",
+  logo,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SidebarProps
+
+const classes = resolveClasses(sidebar, {
+  side,
+  collapsible
+}, useUi("sidebar", uiProp), className)
+
+// Recursive helper to render sidebar items with children
+const hasActiveChild = (item: SidebarItem): boolean => {
+  if (item.active) return true
+  return (item.children ?? []).some(c => hasActiveChild(c))
+}
+---
+
+<aside class={classes.root} data-slot="root" data-sidebar {...rest}>
+  {/* Header */}
+  <div class={classes.header} data-slot="header">
+    <slot name="header">
+      {logo && (
+        <span data-slot="sidebar-logo" class="flex items-center gap-2">
+          <span class="i-lucide-layers size-5 text-primary" />
+          <span class="truncate">{logo}</span>
+        </span>
+      )}
+    </slot>
+  </div>
+
+  {/* Body */}
+  <div class={classes.content} data-slot="content">
+    <slot>
+      {items.map((item) => {
+        const hasChildren = item.children && item.children.length > 0
+        const isActive = item.active || hasActiveChild(item)
+        return (
+          <div class={classes.item} data-slot="item">
+            {hasChildren ? (
+              <details open={isActive} class="group/details">
+                <summary
+                  class={classes.itemLink + (isActive ? " text-foreground bg-muted" : "") + " list-none cursor-pointer"}
+                  data-slot="item-summary"
+                >
+                  {item.icon && (
+                    <span
+                      class={classes.itemIcon + " " + item.icon}
+                      aria-hidden="true"
+                    />
+                  )}
+                  <span data-slot="item-text" class="truncate flex-1">{item.label}</span>
+                  {item.badge !== undefined && (
+                    <span class={classes.itemBadge} data-slot="item-badge">{item.badge}</span>
+                  )}
+                  <span class="i-lucide-chevron-right size-3.5 ml-auto transition-transform group-open/details:rotate-90" />
+                </summary>
+                <div class="mt-0.5 ml-6 flex flex-col gap-0.5">
+                  {item.children!.map(child => (
+                    <a
+                      href={child.href ?? "#"}
+                      class={classes.itemLink + (child.active ? " text-foreground bg-muted" : "") + " text-xs pl-2"}
+                    >
+                      {child.icon && <span class={classes.itemIcon + " " + child.icon} aria-hidden="true" />}
+                      <span data-slot="item-text" class="truncate flex-1">{child.label}</span>
+                      {child.badge !== undefined && (
+                        <span class={classes.itemBadge} data-slot="item-badge">{child.badge}</span>
+                      )}
+                    </a>
+                  ))}
+                </div>
+              </details>
+            ) : (
+              <a
+                href={item.href ?? "#"}
+                class={classes.itemLink + (isActive ? " text-foreground bg-muted" : "")}
+                aria-current={isActive ? "page" : undefined}
+              >
+                {item.icon && (
+                  <span
+                    class={classes.itemIcon + " " + item.icon}
+                    aria-hidden="true"
+                  />
+                )}
+                <span data-slot="item-text" class="truncate flex-1">{item.label}</span>
+                {item.badge !== undefined && (
+                  <span class={classes.itemBadge} data-slot="item-badge">{item.badge}</span>
+                )}
+              </a>
+            )}
+          </div>
+        )
+      })}
+    </slot>
+  </div>
+
+  {/* Footer */}
+  <div class={classes.footer} data-slot="footer">
+    <slot name="footer" />
+  </div>
+</aside>
+
+{collapsible === "offcanvas" && (
+  <button
+    type="button"
+    data-sidebar-toggle
+    class="fixed top-4 left-4 z-50 flex size-9 items-center justify-center rounded-md bg-background border border-border shadow-sm hover:bg-muted transition-colors"
+    aria-label="Toggle sidebar"
+  >
+    <span class="i-lucide-panel-left size-4" />
+  </button>
+)}
+
+<script>
+  document.querySelectorAll("[data-sidebar-toggle]").forEach(toggle => {
+    toggle.addEventListener("click", () => {
+      const sidebar = document.querySelector("[data-sidebar]");
+      if (!sidebar) return;
+      sidebar.classList.toggle("-translate-x-full");
+    });
+  });
+</script>