@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLASlideover.astro

@@ -1,171 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SlideoverProps } from "../../types"
-import slideoverThemeDefault, { createSlideoverTheme } from "../../themes/slideover.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const slideoverTheme = uiConfig.colors ? createSlideoverTheme() : slideoverThemeDefault
-
-const slideover = scv(slideoverTheme)
-
-const {
-  side = "left",
-  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"
-      data-dialog-show={dialogId}
-    >
-      {triggerLabel}
-    </button>
-  ) : (
-    <span data-dialog-show={dialogId}>
-      <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"
-      data-dialog-close={dialogId}
-      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>
-
-<style is:global>
-  /* Transition/Animation support for native <dialog> slideovers */
-  dialog[data-slot="content"] {
-    transition: transform 0.3s ease, opacity 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete !important;
-    opacity: 0;
-  }
-  
-  /* Left side slideover */
-  dialog[data-slot="content"].left-0 {
-    transform: translateX(-100%);
-  }
-  
-  /* Right side slideover */
-  dialog[data-slot="content"].right-0 {
-    transform: translateX(100%);
-  }
-  
-  /* Open states */
-  dialog[data-slot="content"][open] {
-    opacity: 1 !important;
-    transform: translateX(0) !important;
-  }
-  
-  /* Starting styles for enter transitions */
-  @starting-style {
-    dialog[data-slot="content"][open].left-0 {
-      opacity: 0 !important;
-      transform: translateX(-100%) !important;
-    }
-    dialog[data-slot="content"][open].right-0 {
-      opacity: 0 !important;
-      transform: translateX(100%) !important;
-    }
-    dialog[data-slot="content"][open]::backdrop {
-      background-color: rgba(0, 0, 0, 0) !important;
-      backdrop-filter: blur(0px) !important;
-    }
-  }
-
-  /* Backdrop transition */
-  dialog[data-slot="content"]::backdrop {
-    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete !important;
-    background-color: rgba(0, 0, 0, 0.6) !important;
-    backdrop-filter: blur(4px) !important;
-  }
-</style>
-
-<script>
-  if (!(window as any).rlaDialogListenerActive) {
-    (window as any).rlaDialogListenerActive = true;
-    document.addEventListener('click', (e) => {
-      const target = e.target as HTMLElement | null;
-      if (!target) return;
-
-      const showTrigger = target.closest('[data-dialog-show]');
-      if (showTrigger) {
-        const dialogId = showTrigger.getAttribute('data-dialog-show');
-        if (dialogId) {
-          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
-          if (dialog) {
-            if (typeof dialog.showModal === 'function') {
-              dialog.showModal();
-            } else if (typeof (dialog as any).showmodal === 'function') {
-              (dialog as any).showmodal();
-            }
-          }
-        }
-      }
-
-      const closeTrigger = target.closest('[data-dialog-close]');
-      if (closeTrigger) {
-        const dialogId = closeTrigger.getAttribute('data-dialog-close');
-        if (dialogId) {
-          const dialog = document.getElementById(dialogId) as HTMLDialogElement | null;
-          dialog?.close();
-        }
-      }
-
-      if (target.tagName === 'DIALOG' && target.getAttribute('data-close-on-click-outside') === 'true') {
-        const rect = target.getBoundingClientRect();
-        const isInModal = (
-          rect.top <= e.clientY &&
-          e.clientY <= rect.top + rect.height &&
-          rect.left <= e.clientX &&
-          e.clientX <= rect.left + rect.width
-        );
-        if (!isInModal) {
-          (target as HTMLDialogElement).close();
-        }
-      }
-    });
-  }
-</script>
-

package/src/components/astro/RLASlider.astro

@@ -1,58 +0,0 @@
----
-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))
----
-<div class={classes.root} data-slot="slider-root" {...rest}>
-  <div class={classes.track} data-slot="track">
-    <svg class="h-full w-full overflow-visible pointer-events-none">
-      <rect class:list={[classes.range, "h-full"]} width={`${percentage}%`} fill="currentColor" rx="2" />
-    </svg>
-  </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 z-10"
-    data-slot="input"
-  />
-  <svg class="absolute inset-0 h-full w-full overflow-visible pointer-events-none">
-    <circle
-      cx={`${percentage}%`}
-      cy="50%"
-      r="8"
-      class:list={[classes.thumb, "pointer-events-auto border-none"]}
-      data-slot="thumb"
-      fill="currentColor"
-    />
-  </svg>
-</div>

package/src/components/astro/RLASpeedDial.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SpeedDialProps } from "../../types"
-import speedDialThemeDefault, { createSpeedDialTheme } from "../../themes/speed-dial.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const speedDialTheme = uiConfig.colors ? createSpeedDialTheme() : speedDialThemeDefault
-
-const speedDial = scv(speedDialTheme)
-
-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

@@ -1,27 +0,0 @@
----
-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

@@ -1,242 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SplitterProps } from "../../types"
-import splitterThemeDefault, { createSplitterTheme } from "../../themes/splitter.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const splitterTheme = uiConfig.colors ? createSplitterTheme() : 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
-const id = `splitter-${Math.random().toString(36).substring(2, 9)}`
-
-const panelContents: string[] = []
-await Promise.all(
-  sizes.map(async (_, i) => {
-    if (Astro.slots.has(`panel-${i}`)) {
-      panelContents[i] = await Astro.slots.render(`panel-${i}`)
-    }
-  })
-)
----
-
-<rla-splitter {...rest}>
-  <div
-    class:list={[classes.root, id]}
-    data-slot="root"
-    data-resizable
-    data-direction={direction}
-  >
-    {sizes.map((_size, i) => (
-      <>
-        <div
-          class={classes.panel}
-          data-slot="panel"
-          data-resizable-panel={i}
-        >
-          {Astro.slots.has(`panel-${i}`) ? (
-            <Fragment set:html={panelContents[i]} />
-          ) : (
-            i === 0
-              ? <slot />
-              : <slot name="panel" />
-          )}
-        </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>
-</rla-splitter>
-
-<script>
-  class RLASplitter extends HTMLElement {
-    private splitterCleanup: (() => void) | null = null;
-
-    connectedCallback() {
-      this.style.display = 'contents';
-      const container = this.querySelector("[data-resizable]") as HTMLElement | null;
-      if (!container) return;
-
-      const direction = container.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[];
-
-      const cleanupFns: (() => void)[] = [];
-
-      handles.forEach((handle, idx) => {
-        const panelA = panels[idx];
-        const panelB = panels[idx + 1];
-        if (!panelA || !panelB) return;
-
-        const containerSize = () =>
-          isHorizontal
-            ? container.clientWidth
-            : container.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");
-          panels.forEach(p => p.style.transition = "");
-          document.removeEventListener("mousemove", onMouseMove);
-          document.removeEventListener("mouseup", onMouseUp);
-        };
-
-        const onMouseDown = (e: MouseEvent) => {
-          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");
-          panels.forEach(p => p.style.transition = "none");
-          document.addEventListener("mousemove", onMouseMove);
-          document.addEventListener("mouseup", onMouseUp);
-        };
-
-        handle.addEventListener("mousedown", onMouseDown);
-        cleanupFns.push(() => {
-          handle.removeEventListener("mousedown", onMouseDown);
-          document.removeEventListener("mousemove", onMouseMove);
-          document.removeEventListener("mouseup", onMouseUp);
-        });
-
-        // Keyboard resize: arrow keys shift by 2%
-        const onKeyDown = (e: KeyboardEvent) => {
-          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));
-        };
-
-        handle.addEventListener("keydown", onKeyDown);
-        cleanupFns.push(() => {
-          handle.removeEventListener("keydown", onKeyDown);
-        });
-      });
-
-      this.splitterCleanup = () => {
-        cleanupFns.forEach(fn => fn());
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.splitterCleanup) {
-        this.splitterCleanup();
-        this.splitterCleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-splitter')) {
-    customElements.define('rla-splitter', RLASplitter);
-  }
-</script>
-
-<style is:inline set:html={`
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="0"] { width: ${sizes[0] ?? 50}%; }
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="1"] { width: ${sizes[1] ?? 50}%; }
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="2"] { width: ${sizes[2] ?? 0}%; }
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="3"] { width: ${sizes[3] ?? 0}%; }
-
-  .${id}[data-direction="vertical"] > [data-resizable-panel="0"] { height: ${sizes[0] ?? 50}%; }
-  .${id}[data-direction="vertical"] > [data-resizable-panel="1"] { height: ${sizes[1] ?? 50}%; }
-  .${id}[data-direction="vertical"] > [data-resizable-panel="2"] { height: ${sizes[2] ?? 0}%; }
-  .${id}[data-direction="vertical"] > [data-resizable-panel="3"] { height: ${sizes[3] ?? 0}%; }
-`} />

package/src/components/astro/RLASpoiler.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { SpoilerProps } from "../../types"
-import spoilerThemeDefault, { createSpoilerTheme } from "../../themes/spoiler.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const spoilerTheme = uiConfig.colors ? createSpoilerTheme() : spoilerThemeDefault
-
-const spoiler = scv(spoilerTheme)
-
-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

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { StepperProps } from "../../types"
-import stepperThemeDefault, { createStepperTheme } from "../../themes/stepper.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const stepperTheme = uiConfig.colors ? createStepperTheme() : stepperThemeDefault
-
-const stepper = scv(stepperTheme)
-
-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/RLASteps.astro

@@ -1,118 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { StepsProps } from "../../types"
-import stepsThemeDefault, { createStepsTheme } from "../../themes/steps.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const stepsTheme = uiConfig.colors ? createStepsTheme() : stepsThemeDefault
-
-const steps = scv(stepsTheme)
-
-const {
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as StepsProps
-
-const classes = resolveClasses(steps, { size }, useUi("steps", uiProp), className)
----
-
-<div class:list={[classes.root, "rl-steps"]} data-slot="root" data-size={size} {...rest}>
-  <ol class="rl-steps-list">
-    <slot />
-  </ol>
-</div>
-
-<style is:inline>
-  .rl-steps-list {
-    list-style: none;
-    counter-reset: rl-step 0;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .rl-steps-list > li {
-    counter-increment: rl-step;
-    position: relative;
-    padding-left: 2.625rem;
-    padding-bottom: 1.75rem;
-    margin: 0;
-  }
-
-  .rl-steps-list > li:last-child {
-    padding-bottom: 0;
-  }
-
-  .rl-steps-list > li::before {
-    content: counter(rl-step);
-    position: absolute;
-    left: 0;
-    top: 0.125rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 9999px;
-    font-size: 0.75rem;
-    font-weight: 700;
-    line-height: 1;
-    color: var(--color-primary-foreground, #fff);
-    background-color: var(--color-primary, #3b82f6);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    z-index: 1;
-  }
-
-  .rl-steps-list > li::after {
-    content: '';
-    position: absolute;
-    left: calc(0.875rem - 1px);
-    top: calc(1.75rem + 0.375rem);
-    bottom: 0;
-    width: 2px;
-    background-color: var(--color-border, #e5e7eb);
-  }
-
-  .rl-steps-list > li:last-child::after {
-    display: none;
-  }
-
-  .rl-steps-list > li > :first-child {
-    margin-top: 0;
-  }
-
-  /* size: sm */
-  [data-size="sm"] .rl-steps-list > li {
-    padding-left: 2rem;
-    padding-bottom: 1.25rem;
-  }
-  [data-size="sm"] .rl-steps-list > li::before {
-    width: 1.375rem;
-    height: 1.375rem;
-    font-size: 0.625rem;
-  }
-  [data-size="sm"] .rl-steps-list > li::after {
-    left: calc(0.6875rem - 1px);
-    top: calc(1.375rem + 0.375rem);
-  }
-
-  /* size: lg */
-  [data-size="lg"] .rl-steps-list > li {
-    padding-left: 3.25rem;
-    padding-bottom: 2.25rem;
-  }
-  [data-size="lg"] .rl-steps-list > li::before {
-    width: 2.25rem;
-    height: 2.25rem;
-    font-size: 0.875rem;
-  }
-  [data-size="lg"] .rl-steps-list > li::after {
-    left: calc(1.125rem - 1px);
-    top: calc(2.25rem + 0.375rem);
-  }
-</style>