@rimelight/ui 0.0.46 → 0.0.48

package/src/components/slideover/RLSSlideover.tsx

@@ -0,0 +1,159 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { SlideoverProps } from "./slideover"
+import { slideoverTheme } from "./slideover.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSSlideoverProps extends SlideoverProps {
+  children?: JSX.Element
+  trigger?: JSX.Element
+  triggerSlot?: JSX.Element
+  titleSlot?: JSX.Element
+  descriptionSlot?: JSX.Element
+  footer?: JSX.Element
+  footerSlot?: JSX.Element
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+const RLSSlideover: Component<RLSSlideoverProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "side",
+    "open",
+    "defaultOpen",
+    "title",
+    "description",
+    "triggerLabel",
+    "unmountOnHide",
+    "ui",
+    "class",
+    "children",
+    "trigger",
+    "triggerSlot",
+    "titleSlot",
+    "descriptionSlot",
+    "footer",
+    "footerSlot",
+    "onOpenChange"
+  ])
+
+  const side = () => props.side ?? "left"
+  const unmountOnHide = () => props.unmountOnHide ?? true
+
+  const [isOpen, setIsOpen] = createSignal(props.open ?? props.defaultOpen ?? false)
+
+  createEffect(() => {
+    if (props.open !== undefined) {
+      setIsOpen(props.open)
+    }
+  })
+
+  const setOpenState = (open: boolean) => {
+    if (props.open === undefined) {
+      setIsOpen(open)
+    }
+    props.onOpenChange?.(open)
+  }
+
+  onMount(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpen()) {
+        setOpenState(false)
+      }
+    }
+    window.addEventListener("keydown", onKeyDown)
+    onCleanup(() => window.removeEventListener("keydown", onKeyDown))
+  })
+
+  const resolvedClasses = createMemo(() =>
+    slideoverTheme({
+      side: side(),
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const triggerContent = () => props.trigger ?? props.triggerSlot
+  const footerContent = () => props.footer ?? props.footerSlot
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.triggerLabel ? (
+        <button
+          type="button"
+          class={resolvedClasses().trigger}
+          data-slot="trigger"
+          onClick={() => setOpenState(true)}
+        >
+          {props.triggerLabel}
+        </button>
+      ) : triggerContent() ? (
+        <span onClick={() => setOpenState(true)}>{triggerContent()}</span>
+      ) : null}
+
+      <Show when={!unmountOnHide() || isOpen()}>
+        <Show when={isOpen()}>
+          <div
+            class={resolvedClasses().backdrop}
+            data-slot="backdrop"
+            onClick={() => setOpenState(false)}
+          />
+        </Show>
+
+        <div
+          class={resolvedClasses().content}
+          data-slot="content"
+          data-state={isOpen() ? "open" : "closed"}
+          style={{ display: isOpen() ? undefined : "none" }}
+        >
+          <button
+            class={resolvedClasses().closeButton}
+            data-slot="close-button"
+            type="button"
+            aria-label="Close slideover"
+            onClick={() => setOpenState(false)}
+          >
+            <RLSIcon name="i-rl-close" class="size-4" aria-hidden="true" />
+          </button>
+
+          <div class={resolvedClasses().header} data-slot="header">
+            {props.titleSlot !== undefined ? (
+              props.titleSlot
+            ) : props.title ? (
+              <h3 class={resolvedClasses().title} data-slot="title">
+                {props.title}
+              </h3>
+            ) : null}
+
+            {props.descriptionSlot !== undefined ? (
+              props.descriptionSlot
+            ) : props.description ? (
+              <p class={resolvedClasses().description} data-slot="description">
+                {props.description}
+              </p>
+            ) : null}
+          </div>
+
+          {props.children}
+
+          {footerContent() !== undefined && (
+            <div class={resolvedClasses().footer} data-slot="footer">
+              {footerContent()}
+            </div>
+          )}
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default RLSSlideover

package/src/components/slider/RLSSlider.tsx

@@ -0,0 +1,112 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { SliderProps } from "./slider"
+import { sliderTheme } from "./slider.theme"
+
+export interface RLSSliderProps extends SliderProps {
+  children?: JSX.Element
+  defaultValue?: number
+  onChange?: (val: number) => void
+}
+
+const RLSSlider: Component<RLSSliderProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "value",
+    "defaultValue",
+    "min",
+    "max",
+    "step",
+    "name",
+    "color",
+    "theme",
+    "ui",
+    "class",
+    "children",
+    "onChange"
+  ])
+
+  const min = () => props.min ?? 0
+  const max = () => props.max ?? 100
+  const step = () => props.step ?? 1
+
+  const [internalVal, setInternalVal] = createSignal(props.value ?? props.defaultValue ?? min())
+
+  createEffect(() => {
+    if (props.value !== undefined) {
+      setInternalVal(props.value)
+    }
+  })
+
+  const currentVal = () => (props.value !== undefined ? props.value : internalVal())
+
+  const percentage = createMemo(() => {
+    const v = currentVal()
+    const mn = min()
+    const mx = max()
+    return Math.min(100, Math.max(0, ((v - mn) / (mx - mn)) * 100))
+  })
+
+  const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (e) => {
+    const num = parseFloat(e.currentTarget.value)
+    if (!isNaN(num)) {
+      if (props.value === undefined) {
+        setInternalVal(num)
+      }
+      props.onChange?.(num)
+    }
+  }
+
+  const resolvedClasses = createMemo(() =>
+    sliderTheme({
+      color: props.color,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="slider-root" data-theme={props.theme} {...rest}>
+      <div class={resolvedClasses().track} data-slot="track">
+        <svg class="h-full w-full overflow-visible pointer-events-none">
+          <rect
+            class={`${resolvedClasses().range} h-full`}
+            width={`${percentage()}%`}
+            fill="currentColor"
+            rx="2"
+          />
+        </svg>
+      </div>
+
+      <input
+        type="range"
+        min={min()}
+        max={max()}
+        step={step()}
+        value={currentVal()}
+        name={props.name}
+        class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
+        data-slot="input"
+        onInput={handleInput}
+      />
+
+      <svg class="absolute inset-0 h-full w-full overflow-visible pointer-events-none">
+        <circle
+          cx={`${percentage()}%`}
+          cy="50%"
+          r="8"
+          class={`${resolvedClasses().thumb} pointer-events-auto border-none`}
+          data-slot="thumb"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default RLSSlider

package/src/components/speed-dial/RLSSpeedDial.tsx

@@ -0,0 +1,27 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { SpeedDialProps } from "./speed-dial"
+import { speedDialTheme } from "./speed-dial.theme"
+
+export interface RLSSpeedDialProps extends SpeedDialProps {
+  children?: JSX.Element
+}
+
+const RLSSpeedDial: Component<RLSSpeedDialProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    speedDialTheme({
+      ui: props.ui,
+      class: props.class,
+      ...allProps
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSSpeedDial

package/src/components/spinner/RLSSpinner.tsx

@@ -0,0 +1,22 @@
+import { createMemo, splitProps, type Component } from "solid-js"
+import type { SpinnerProps } from "./spinner"
+import { spinnerTheme } from "./spinner.theme"
+
+export interface RLSSpinnerProps extends SpinnerProps {}
+
+const RLSSpinner: Component<RLSSpinnerProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["size", "color", "theme", "ui", "class"])
+
+  const classes = createMemo(() =>
+    spinnerTheme({
+      size: props.size ?? "md",
+      color: props.color ?? "current",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return <div class={classes()["root"]} data-slot="root" data-theme={props.theme} {...rest} />
+}
+
+export default RLSSpinner

package/src/components/splitter/RLASplitter.astro

@@ -85,7 +85,7 @@ await Promise.all(
       const container = this.querySelector("[data-resizable]") as HTMLElement | null;
       if (!container) return;
 
-      const direction = container.dataset.direction ?? "horizontal";
+      const direction = container.dataset["direction"] ?? "horizontal";
       const isHorizontal = direction === "horizontal";
 
       const panels = Array.from(

package/src/components/splitter/RLSSplitter.tsx

@@ -0,0 +1,178 @@
+import {
+  children,
+  createMemo,
+  createSignal,
+  For,
+  splitProps,
+  type Component,
+  type JSX
+} from "solid-js"
+import type { SplitterProps } from "./splitter"
+import { splitterTheme } from "./splitter.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSSplitterProps extends SplitterProps {
+  children?: JSX.Element
+  panels?: JSX.Element[]
+}
+
+interface DragState {
+  i: number
+  startPos: number
+  startA: number
+  startB: number
+}
+
+const RLSSplitter: Component<RLSSplitterProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "direction",
+    "defaultSizes",
+    "ui",
+    "class",
+    "children",
+    "panels"
+  ])
+
+  const childContent = children(() => props.children)
+
+  const isHorizontal = () => (props.direction ?? "horizontal") === "horizontal"
+
+  const [sizes, setSizes] = createSignal<number[]>(
+    (() => {
+      const ds = props.defaultSizes ?? [50, 50]
+      const totalSize = ds.reduce((s, v) => s + v, 0)
+      return ds.map((s) => (s / (totalSize || 100)) * 100)
+    })()
+  )
+
+  const [drag, setDrag] = createSignal<DragState | null>(null)
+  let rootRef: HTMLDivElement | undefined
+
+  const panelContents = createMemo<JSX.Element[]>(() => {
+    if (props.panels && props.panels.length > 0) return props.panels
+    return childContent.toArray()
+  })
+
+  const resolvedClasses = createMemo(() =>
+    splitterTheme({
+      direction: props.direction ?? "horizontal",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const containerSize = () =>
+    isHorizontal() ? (rootRef?.clientWidth ?? 0) : (rootRef?.clientHeight ?? 0)
+
+  const handlePointerDown = (i: number, e: PointerEvent) => {
+    const current = sizes()
+    if (current[i + 1] === undefined) return
+    e.preventDefault()
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+    setDrag({
+      i,
+      startPos: isHorizontal() ? e.clientX : e.clientY,
+      startA: current[i] ?? 0,
+      startB: current[i + 1] ?? 0
+    })
+  }
+
+  const handlePointerMove = (i: number, e: PointerEvent) => {
+    const state = drag()
+    if (!state || state.i !== i) return
+    const delta = isHorizontal() ? e.clientX - state.startPos : e.clientY - state.startPos
+    const size = containerSize()
+    if (!size) return
+    const deltaPct = (delta / size) * 100
+    const minPct = (48 / size) * 100
+    const newA = Math.max(minPct, state.startA + deltaPct)
+    const newB = Math.max(minPct, state.startB - deltaPct)
+    setSizes((prev) => {
+      const next = [...prev]
+      next[state.i] = newA
+      if (next[state.i + 1] !== undefined) next[state.i + 1] = newB
+      return next
+    })
+  }
+
+  const handlePointerUp = (_i: number, e: PointerEvent) => {
+    if (!drag()) return
+    if ((e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) {
+      ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
+    }
+    setDrag(null)
+  }
+
+  const handleKeyDown = (i: number, e: KeyboardEvent) => {
+    const current = sizes()
+    if (current[i + 1] === undefined) return
+    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 stepPct = 2
+    const delta = forward ? stepPct : -stepPct
+    const next = [...current]
+    const a = (next[i] ?? 0) + delta
+    const b = (next[i + 1] ?? 0) - delta
+    if (a < 0 || b < 0) return
+    next[i] = a
+    if (next[i + 1] !== undefined) next[i + 1] = b
+    setSizes(next)
+  }
+
+  const panelStyle = (size: number) =>
+    isHorizontal()
+      ? { "flex": `0 0 ${size}%` as const, "min-width": "0" }
+      : { "flex": `0 0 ${size}%` as const, "min-height": "0" }
+
+  return (
+    <div
+      ref={(el) => (rootRef = el)}
+      class={resolvedClasses().root}
+      data-slot="root"
+      data-resizable
+      data-direction={props.direction ?? "horizontal"}
+      {...rest}
+    >
+      <For each={sizes()}>
+        {(size, i) => (
+          <>
+            <div
+              class={resolvedClasses().panel}
+              data-slot="panel"
+              data-resizable-panel={i()}
+              style={panelStyle(size)}
+            >
+              {panelContents()[i()]}
+            </div>
+
+            {i() < sizes().length - 1 ? (
+              <div
+                class={resolvedClasses().handle}
+                data-slot="handle"
+                data-resizable-handle={i()}
+                role="separator"
+                aria-orientation={isHorizontal() ? "vertical" : "horizontal"}
+                tabindex={0}
+                aria-label="Resize panels"
+                onPointerDown={(e) => handlePointerDown(i(), e)}
+                onPointerMove={(e) => handlePointerMove(i(), e)}
+                onPointerUp={(e) => handlePointerUp(i(), e)}
+                onKeyDown={(e) => handleKeyDown(i(), e)}
+              >
+                <RLSIcon
+                  name={isHorizontal() ? "gripVertical" : "gripHorizontal"}
+                  class="size-3.5 text-muted/50"
+                  aria-hidden="true"
+                />
+              </div>
+            ) : null}
+          </>
+        )}
+      </For>
+    </div>
+  )
+}
+
+export default RLSSplitter

package/src/components/spoiler/RLSSpoiler.tsx

@@ -0,0 +1,26 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { SpoilerProps } from "./spoiler"
+import { spoilerTheme } from "./spoiler.theme"
+
+export interface RLSSpoilerProps extends SpoilerProps {
+  children?: JSX.Element
+}
+
+const RLSSpoiler: Component<RLSSpoilerProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const classes = createMemo(() =>
+    spoilerTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={classes()["root"]} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSSpoiler

package/src/components/stepper/RLAStepper.astro

@@ -158,9 +158,9 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
       private isDisabled: boolean = false
 
       connectedCallback() {
-        this.currentIndex = Number(this.dataset.currentIndex || 0)
-        this.isLinear = this.dataset.linear === "true"
-        this.isDisabled = this.dataset.disabled === "true"
+        this.currentIndex = Number(this.dataset["currentIndex"] || 0)
+        this.isLinear = this.dataset["linear"] === "true"
+        this.isDisabled = this.dataset["disabled"] === "true"
 
         const items = this.querySelectorAll('[data-slot="item"]')
         this.itemsCount = items.length
@@ -168,7 +168,7 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
         const triggers = this.querySelectorAll('[data-step-trigger]')
         triggers.forEach(trig => {
           trig.addEventListener('click', () => {
-            const index = Number((trig as HTMLElement).dataset.stepTrigger)
+            const index = Number((trig as HTMLElement).dataset["stepTrigger"])
             if (!isNaN(index)) {
               this.goTo(index)
             }
@@ -205,11 +205,11 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
 
         const oldIndex = this.currentIndex
         this.currentIndex = index
-        this.dataset.currentIndex = String(index)
+        this.dataset["currentIndex"] = String(index)
         this.updateState()
 
         const itemEl = this.querySelector(`[data-slot="item"][data-index="${index}"]`) as HTMLElement | null
-        const itemVal = itemEl?.dataset.value ?? index
+        const itemVal = itemEl?.dataset["value"] ?? index
 
         if (index > oldIndex) {
           this.dispatchEvent(new CustomEvent('next', { detail: { index, value: itemVal } }))
@@ -223,7 +223,7 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
         const items = this.querySelectorAll('[data-slot="item"]')
         items.forEach((itemNode) => {
           const item = itemNode as HTMLElement
-          const idx = Number(item.dataset.index)
+          const idx = Number(item.dataset["index"])
           const isCompleted = idx < this.currentIndex
           const isActive = idx === this.currentIndex
           const isDisabled = this.isDisabled || (this.isLinear && idx > this.currentIndex)
@@ -261,7 +261,7 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
           const separators = this.querySelectorAll('[data-slot="separator"]')
           separators.forEach((sepNode) => {
             const sep = sepNode as HTMLElement
-            const sepIdx = Number(sep.dataset.separatorIndex)
+            const sepIdx = Number(sep.dataset["separatorIndex"])
             if (sepIdx < this.currentIndex) {
               sep.classList.add('!bg-primary-600')
               sep.classList.remove('bg-neutral-200')
@@ -275,7 +275,7 @@ const currentIndex = activeIndex >= 0 ? activeIndex : 0
         const panels = this.querySelectorAll('[data-stepper-panel]')
         panels.forEach((panelNode) => {
           const panel = panelNode as HTMLElement
-          const idx = Number(panel.dataset.stepperPanel)
+          const idx = Number(panel.dataset["stepperPanel"])
           if (idx === this.currentIndex) {
             panel.removeAttribute('hidden')
           } else {