@rimelight/ui 0.0.30 → 0.0.32

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>

package/src/components/astro/RLASkeleton.astro

@@ -0,0 +1,20 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SkeletonProps } from "../../types"
+import skeletonTheme from "../../themes/skeleton.theme"
+
+const skeleton = scv(skeletonTheme)
+
+const {
+  shape = "rounded",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SkeletonProps
+
+const classes = resolveClasses(skeleton, {
+  shape
+}, useUi("skeleton", uiProp), className)
+---
+<div class={classes.root} data-slot="root" {...rest} />

package/src/components/astro/RLASlideover.astro

@@ -0,0 +1,72 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SlideoverProps } from "../../types"
+import slideoverTheme from "../../themes/slideover.theme"
+
+const slideover = scv(slideoverTheme)
+
+const {
+  side = "right",
+  title,
+  description,
+  triggerLabel,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SlideoverProps
+
+const classes = resolveClasses(slideover, {
+  side
+}, useUi("slideover", uiProp), className)
+
+const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="slideover-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 slideover"
+    >
+      <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/RLASlider.astro

@@ -0,0 +1,58 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SliderProps } from "../../types"
+import sliderThemeDefault, { createSliderTheme } from "../../themes/slider.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const sliderTheme = uiConfig.colors ? createSliderTheme(uiConfig.colors) : sliderThemeDefault
+const slider = scv(sliderTheme)
+
+const {
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  name,
+  color = "primary",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SliderProps
+
+const classes = resolveClasses(slider, {
+  color,
+  theme
+}, useUi("slider", uiProp), className)
+
+const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))
+---
+<style define:vars={{ sliderPct: `${percentage}%` }}>
+  [data-slot="range"] { left: 0%; right: calc(100% - var(--slider-pct)); }
+  [data-slot="thumb"] { left: calc(var(--slider-pct) - 9px); }
+</style>
+
+<div class={classes.root} data-slot="slider-root" {...rest}>
+  <div class={classes.track} data-slot="track">
+    <div
+      class={classes.range}
+      data-slot="range"
+    />
+  </div>
+  <input
+    type="range"
+    min={min}
+    max={max}
+    step={step}
+    value={value}
+    name={name}
+    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+    data-slot="input"
+  />
+  <div
+    class={classes.thumb}
+    data-slot="thumb"
+  />
+</div>

package/src/components/astro/RLASpeedDial.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SpeedDialProps } from "../../types"
+import speedDialThemeDefault from "../../themes/speed-dial.theme"
+
+const speedDial = scv(speedDialThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SpeedDialProps
+
+const classes = resolveClasses(speedDial, {}, useUi("speedDial", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLASpinner.astro

@@ -0,0 +1,27 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SpinnerProps } from "../../types"
+import spinnerThemeDefault, { createSpinnerTheme } from "../../themes/spinner.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const spinnerTheme = uiConfig.colors ? createSpinnerTheme(uiConfig.colors) : spinnerThemeDefault
+const spinner = scv(spinnerTheme)
+
+const {
+  size = "md",
+  color = "current",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SpinnerProps
+
+const classes = resolveClasses(spinner, {
+  size,
+  color,
+  theme
+}, useUi("spinner", uiProp), className)
+---
+<div class={classes.root} data-slot="root" {...rest} />

package/src/components/astro/RLASplitter.astro

@@ -0,0 +1,177 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SplitterProps } from "../../types"
+import splitterThemeDefault, { createSplitterTheme } from "../../themes/splitter.theme"
+
+const splitterTheme = splitterThemeDefault
+const splitter = scv(splitterTheme)
+
+const {
+  direction = "horizontal",
+  defaultSizes = [50, 50],
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SplitterProps
+
+const classes = resolveClasses(splitter, {
+  direction
+}, useUi("splitter", 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/RLASpoiler.astro

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

package/src/components/astro/RLAStepper.astro

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

package/src/components/astro/RLAStickySurface.astro

@@ -0,0 +1,27 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { StickySurfaceProps } from "../../types"
+import stickySurfaceTheme from "../../themes/sticky-surface.theme"
+
+const stickySurface = scv(stickySurfaceTheme)
+
+const {
+  offsetTop = 0,
+  zIndex = 10,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as StickySurfaceProps
+
+const classes = resolveClasses(stickySurface, {}, useUi("stickySurface", uiProp), className)
+const topOffset = `${offsetTop}px`
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  style={{ top: topOffset, zIndex }}
+  {...rest}
+>
+  <slot />
+</div>

package/src/components/astro/RLASwitch.astro

@@ -0,0 +1,51 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { SwitchProps } from "../../types"
+import switchThemeDefault, { createSwitchTheme } from "../../themes/switch.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const switchTheme = uiConfig.colors ? createSwitchTheme(uiConfig.colors) : switchThemeDefault
+
+const switchFn = scv(switchTheme)
+
+const {
+  checked = false,
+  disabled = false,
+  name,
+  label,
+  color = "primary",
+  size = "md",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SwitchProps
+
+const classes = resolveClasses(switchFn, {
+  color,
+  size,
+  checked,
+  theme
+}, useUi("switch", uiProp), className);
+---
+<label class={classes.root} data-slot="root">
+  <input
+    type="checkbox"
+    class={classes.input}
+    checked={checked}
+    disabled={disabled}
+    name={name}
+    {...rest}
+  />
+  <div class={classes.track} data-slot="track">
+    <div class={classes.thumb} data-slot="thumb" />
+  </div>
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+</label>

package/src/components/astro/RLATable.astro

@@ -0,0 +1,60 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { TableProps } from "../../types"
+import tableThemeDefault, { createTableTheme } from "../../themes/table.theme"
+
+const tableTheme = tableThemeDefault
+const table = scv(tableTheme)
+
+const {
+  headers = [],
+  rows = [],
+  striped = false,
+  bordered = false,
+  hoverable = true,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as TableProps
+
+const classes = resolveClasses(table, {
+  striped,
+  bordered
+}, useUi("table", uiProp), className);
+---
+<div class={classes.root} data-slot="root">
+  <table class={classes.table} data-slot="table" {...rest}>
+    {headers.length > 0 && (
+      <thead class={classes.thead} data-slot="thead">
+        <tr class={classes.tr} data-slot="tr">
+          {headers.map(header => {
+            const label = typeof header === "string" ? header : header.label
+            const cellClass = typeof header === "string" ? "" : (header.class || "")
+            return (
+              <th class={classes.th + " " + cellClass} data-slot="th">
+                {label}
+              </th>
+            )
+          })}
+        </tr>
+      </thead>
+    )}
+    <tbody class={classes.tbody} data-slot="tbody">
+      <slot>
+        {rows.map(row => {
+          const cells = Array.isArray(row) ? row : Object.values(row)
+          return (
+            <tr class={classes.tr} data-slot="tr">
+              {cells.map(cell => (
+                <td class={classes.td} data-slot="td">
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          )
+        })}
+      </slot>
+    </tbody>
+  </table>
+</div>