@rimelight/ui 0.0.31 → 0.0.32

package/src/components/astro/RLAQrCode.astro

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

package/src/components/astro/RLARadioGroup.astro

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

package/src/components/astro/RLARating.astro

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

package/src/components/astro/RLAScrollArea.astro

@@ -2,7 +2,7 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { ScrollAreaProps } from "../../types"
-import scrollAreaThemeDefault, { createScrollAreaTheme } from "../../themes/scrollArea.theme"
+import scrollAreaThemeDefault, { createScrollAreaTheme } from "../../themes/scroll-area.theme"
 
 const scrollAreaTheme = scrollAreaThemeDefault
 const scrollArea = scv(scrollAreaTheme)

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/{RLASheet.astro → RLASlideover.astro}

@@ -1,10 +1,10 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { SheetProps } from "../../types"
-import sheetTheme from "../../themes/sheet.theme"
+import type { SlideoverProps } from "../../types"
+import slideoverTheme from "../../themes/slideover.theme"
 
-const sheet = scv(sheetTheme)
+const slideover = scv(slideoverTheme)
 
 const {
   side = "right",
@@ -14,15 +14,15 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as SheetProps
+} = Astro.props as SlideoverProps
 
-const classes = resolveClasses(sheet, {
+const classes = resolveClasses(slideover, {
   side
-}, useUi("sheet", uiProp), className)
+}, useUi("slideover", uiProp), className)
 
-const dialogId = `rla-sheet-${Math.random().toString(36).substring(2, 9)}`
+const dialogId = `rla-slideover-${Math.random().toString(36).substring(2, 9)}`
 ---
-<div class={classes.root} data-slot="sheet-container">
+<div class={classes.root} data-slot="slideover-container">
   {triggerLabel ? (
     <button
       class={classes.trigger}
@@ -50,7 +50,7 @@ const dialogId = `rla-sheet-${Math.random().toString(36).substring(2, 9)}`
       data-slot="close-button"
       type="button"
       onclick={`document.getElementById('${dialogId}').close()`}
-      aria-label="Close sheet"
+      aria-label="Close slideover"
     >
       <span class="i-lucide-x size-4" aria-hidden="true" />
     </button>

package/src/components/astro/RLASlider.astro

@@ -16,23 +16,29 @@ const {
   step = 1,
   name,
   color = "primary",
+  theme,
   ui: uiProp,
   class: className,
   ...rest
 } = Astro.props as SliderProps
 
 const classes = resolveClasses(slider, {
-  color
+  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"
-      style={{ left: "0%", right: `${100 - percentage}%` }}
     />
   </div>
   <input
@@ -48,6 +54,5 @@ const percentage = Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100
   <div
     class={classes.thumb}
     data-slot="thumb"
-    style={{ left: `calc(${percentage}% - 9px)` }}
   />
 </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

@@ -12,6 +12,7 @@ const spinner = scv(spinnerTheme)
 const {
   size = "md",
   color = "current",
+  theme,
   ui: uiProp,
   class: className,
   ...rest
@@ -19,7 +20,8 @@ const {
 
 const classes = resolveClasses(spinner, {
   size,
-  color
+  color,
+  theme
 }, useUi("spinner", uiProp), className)
 ---
 <div class={classes.root} data-slot="root" {...rest} />

package/src/components/astro/{RLAResizable.astro → RLASplitter.astro}

@@ -1,11 +1,11 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ResizableProps } from "../../types"
-import resizableThemeDefault, { createResizableTheme } from "../../themes/resizable.theme"
+import type { SplitterProps } from "../../types"
+import splitterThemeDefault, { createSplitterTheme } from "../../themes/splitter.theme"
 
-const resizableTheme = resizableThemeDefault
-const resizable = scv(resizableTheme)
+const splitterTheme = splitterThemeDefault
+const splitter = scv(splitterTheme)
 
 const {
   direction = "horizontal",
@@ -13,11 +13,11 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as ResizableProps
+} = Astro.props as SplitterProps
 
-const classes = resolveClasses(resizable, {
+const classes = resolveClasses(splitter, {
   direction
-}, useUi("resizable", uiProp), className)
+}, useUi("splitter", uiProp), className)
 
 // Normalise sizes so they sum to 100
 const total = defaultSizes.reduce((s, v) => s + v, 0)

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

@@ -2,7 +2,7 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { StickySurfaceProps } from "../../types"
-import stickySurfaceTheme from "../../themes/stickySurface.theme"
+import stickySurfaceTheme from "../../themes/sticky-surface.theme"
 
 const stickySurface = scv(stickySurfaceTheme)
 

package/src/components/astro/RLASwitch.astro

@@ -17,6 +17,7 @@ const {
   label,
   color = "primary",
   size = "md",
+  theme,
   ui: uiProp,
   class: className,
   ...rest
@@ -25,7 +26,8 @@ const {
 const classes = resolveClasses(switchFn, {
   color,
   size,
-  checked
+  checked,
+  theme
 }, useUi("switch", uiProp), className);
 ---
 <label class={classes.root} data-slot="root">

package/src/components/astro/RLATableOfContents.astro

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

package/src/components/astro/RLAThemeSelector.astro

@@ -2,7 +2,7 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { ThemeSelectorProps } from "../../types"
-import themeSelectorTheme from "../../themes/themeSelector.theme"
+import themeSelectorTheme from "../../themes/theme-selector.theme"
 import RLAButton from "./RLAButton.astro"
 
 const themeSelector = scv(themeSelectorTheme)