@rimelight/ui 0.0.42 → 0.0.44

package/src/components/spinner/spinner.theme.ts

@@ -1,33 +1,28 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSpinnerTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "animate-spin shrink-0 rounded-full border-2 border-t-transparent border-current"
+export const spinnerTheme = defineTheme("spinner", {
+  slots: ["root"],
+  base: {
+    root: "animate-spin shrink-0 rounded-full border-2 border-t-transparent text-[var(--rl-text)] border-current"
+  },
+  variants: {
+    size: {
+      xs: { root: "size-3" },
+      sm: { root: "size-4" },
+      md: { root: "size-6" },
+      lg: { root: "size-8" },
+      xl: { root: "size-10" }
     },
-    variants: {
-      size: {
-        xs: { root: "size-3" },
-        sm: { root: "size-4" },
-        md: { root: "size-6" },
-        lg: { root: "size-8" },
-        xl: { root: "size-10" }
-      },
-      color: Object.fromEntries([
-        ["current", { root: "text-current" }],
-        ...colors.map((color) => [color, { root: "rl-color-" + color + " text-[var(--rl-text)]" }])
-      ]),
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      color: "current"
+    color: "auto"
+  },
+  compoundVariants: [
+    {
+      color: "current",
+      classNames: { root: "text-current" }
     }
-  })
-
-export default createSpinnerTheme()
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "current"
+  }
+})

package/src/components/spinner/spinner.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface SpinnerProps {
   /**

package/src/components/splitter/RLASplitter.astro

@@ -1,25 +1,17 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { SplitterProps } from "./splitter"
-import splitterTheme from "./splitter.theme"
+import { splitterTheme } from "./splitter.theme"
 
 import RLAIcon from "../icon/RLAIcon.astro"
 
-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)
+const classes = splitterTheme(Astro.props)
 
 // Normalise sizes so they sum to 100
 const total = defaultSizes.reduce((s, v) => s + v, 0)
@@ -74,7 +66,7 @@ await Promise.all(
           >
             <RLAIcon
               name={direction === "horizontal" ? "gripVertical" : "gripHorizontal"}
-              class="size-3.5 text-muted-foreground/50"
+              class="size-3.5 text-muted/50"
               aria-hidden="true"
             />
           </div>

package/src/components/splitter/splitter.theme.ts

@@ -1,23 +1,20 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSplitterTheme = () =>
-  defineTheme({
-    slots: ["root", "panel", "handle"],
-    base: {
-      root: "flex w-full h-full",
-      panel: "overflow-auto transition-all",
-      handle:
-        "flex items-center justify-center bg-border hover:bg-primary/50 transition-colors cursor-col-resize select-none"
-    },
-    variants: {
-      direction: {
-        horizontal: { root: "flex-row", handle: "w-1.5 h-full cursor-col-resize" },
-        vertical: { root: "flex-col", handle: "h-1.5 w-full cursor-row-resize" }
-      }
-    },
-    defaultVariants: {
-      direction: "horizontal"
+export const splitterTheme = defineTheme("splitter", {
+  slots: ["root", "panel", "handle"],
+  base: {
+    root: "flex w-full h-full",
+    panel: "overflow-auto transition-all",
+    handle:
+      "flex items-center justify-center bg-neutral-200 hover:bg-primary/50 transition-colors cursor-col-resize select-none"
+  },
+  variants: {
+    direction: {
+      horizontal: { root: "flex-row", handle: "w-1.5 h-full cursor-col-resize" },
+      vertical: { root: "flex-col", handle: "h-1.5 w-full cursor-row-resize" }
     }
-  })
-
-export default createSplitterTheme()
+  },
+  defaultVariants: {
+    direction: "horizontal"
+  }
+})

package/src/components/spoiler/RLASpoiler.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { SpoilerProps } from "./spoiler"
-import spoilerTheme from "./spoiler.theme"
-
-
-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 />
+---
+import { spoilerTheme } from "./spoiler.theme"
+
+
+
+const classes = spoilerTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/spoiler/spoiler.theme.ts

@@ -1,13 +1,10 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSpoilerTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createSpoilerTheme()
+export const spoilerTheme = defineTheme("spoiler", {
+  slots: ["root"],
+  base: {
+    root: ""
+  },
+  variants: {},
+  defaultVariants: {}
+})

package/src/components/stepper/RLAStepper.astro

@@ -1,21 +1,300 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { StepperProps } from "./stepper"
-import stepperTheme from "./stepper.theme"
-
-
-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>
+---
+import type { StepperProps } from "./stepper"
+import { stepperTheme } from "./stepper.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+const {
+  items = [],
+  value,
+  defaultValue,
+  modelValue,
+  valueKey = "value",
+  linear = true,
+  disabled = false,
+  size = "sm",
+  ...rest
+} = Astro.props as StepperProps
+
+const classes = stepperTheme(Astro.props)
+
+const initialActiveValue = value ?? modelValue ?? defaultValue ?? (items.length > 0 ? (items[0]?.[valueKey] ?? items[0]?.value ?? 0) : 0)
+
+const uid = Math.random().toString(36).substring(2, 9)
+
+const activeIndex = items.findIndex((item, idx) => {
+  const val = item[valueKey] ?? item.value ?? idx
+  return String(val) === String(initialActiveValue)
+})
+const currentIndex = activeIndex >= 0 ? activeIndex : 0
+---
+<rla-stepper
+  data-stepper-uid={uid}
+  data-linear={linear ? "true" : "false"}
+  data-disabled={disabled ? "true" : "false"}
+  data-current-index={currentIndex}
+  {...rest}
+>
+  <div
+    class:list={[classes.root]}
+    data-slot="root"
+  >
+    <div class={classes.header} data-slot="header">
+      {items.map((item, index) => {
+        const itemValue = item[valueKey] ?? item.value ?? index
+        const isCompleted = index < currentIndex
+        const isActive = index === currentIndex
+        const isDisabled = disabled || item.disabled || (linear && index > currentIndex)
+        const state = isCompleted ? "completed" : isActive ? "active" : "inactive"
+
+        return (
+          <>
+            <div
+              class:list={[classes.item, item.class]}
+              data-slot="item"
+              data-index={index}
+              data-value={itemValue}
+              data-state={state}
+              data-disabled={isDisabled ? "true" : undefined}
+            >
+              <div class={classes.container} data-slot="container">
+                <button
+                  type="button"
+                  class:list={[
+                    classes.trigger,
+                    (isActive || isCompleted) && "!bg-primary-600 !border-primary-600 !text-white"
+                  ]}
+                  data-slot="trigger"
+                  disabled={isDisabled}
+                  data-step-trigger={index}
+                >
+                  <span class={classes.indicator} data-slot="indicator">
+                    <slot name="indicator" {...({ item, index, state } as any)}>
+                      {item.icon ? (
+                        <RLAIcon
+                          name={item.icon}
+                          size="sm"
+                          class:list={[
+                            classes.icon,
+                            (isActive || isCompleted) ? "!text-white" : "text-neutral-400"
+                          ]}
+                          data-slot="icon"
+                        />
+                      ) : (
+                        <span>{index + 1}</span>
+                      )}
+                    </slot>
+                  </span>
+                </button>
+              </div>
+
+              {(item.title || item.description || Astro.slots.has("title") || Astro.slots.has("description") || Astro.slots.has("wrapper")) && (
+                <div class={classes.wrapper} data-slot="wrapper">
+                  <slot name="wrapper" {...({ item, index } as any)}>
+                    {item.title && (
+                      <div class={classes.title} data-slot="title">
+                        <slot name="title" {...({ item, index } as any)}>{item.title}</slot>
+                      </div>
+                    )}
+                    {item.description && (
+                      <div class={classes.description} data-slot="description">
+                        <slot name="description" {...({ item, index } as any)}>{item.description}</slot>
+                      </div>
+                    )}
+                  </slot>
+                </div>
+              )}
+            </div>
+
+            {index < items.length - 1 && (
+              <div
+                class:list={[
+                  classes.separator,
+                  "flex-1 h-0.5 mx-2 self-start mt-4 transition-colors",
+                  index < currentIndex ? "bg-primary-600" : "bg-neutral-200"
+                ]}
+                data-slot="separator"
+                data-separator-index={index}
+              />
+            )}
+          </>
+        )
+      })}
+    </div>
+
+    <div class={classes.content} data-slot="content">
+      <slot>
+        <slot name="content" {...({ item: items[currentIndex], index: currentIndex } as any)} />
+        {items.map((item, index) => {
+          const itemValue = item[valueKey] ?? item.value ?? index
+          const isActive = index === currentIndex
+          const slotName = item.slot
+
+          return (
+            <div
+              data-stepper-panel={index}
+              data-value={itemValue}
+              hidden={isActive ? undefined : "until-found"}
+              class="w-full"
+            >
+              {slotName && Astro.slots.has(slotName) ? (
+                <slot name={slotName} {...({ item, index } as any)} />
+              ) : item.content ? (
+                <div>{item.content}</div>
+              ) : null}
+            </div>
+          )
+        })}
+      </slot>
+    </div>
+  </div>
+</rla-stepper>
+
+<script>
+  if (typeof HTMLElement !== 'undefined') {
+    class RLAStepper extends HTMLElement {
+      private currentIndex: number = 0
+      private itemsCount: number = 0
+      private isLinear: boolean = true
+      private isDisabled: boolean = false
+
+      connectedCallback() {
+        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
+
+        const triggers = this.querySelectorAll('[data-step-trigger]')
+        triggers.forEach(trig => {
+          trig.addEventListener('click', () => {
+            const index = Number((trig as HTMLElement).dataset.stepTrigger)
+            if (!isNaN(index)) {
+              this.goTo(index)
+            }
+          })
+        })
+
+        this.updateState()
+      }
+
+      public get hasNext(): boolean {
+        return this.currentIndex < this.itemsCount - 1
+      }
+
+      public get hasPrev(): boolean {
+        return this.currentIndex > 0
+      }
+
+      public next() {
+        if (this.hasNext) {
+          this.goTo(this.currentIndex + 1)
+        }
+      }
+
+      public prev() {
+        if (this.hasPrev) {
+          this.goTo(this.currentIndex - 1)
+        }
+      }
+
+      public goTo(index: number) {
+        if (this.isDisabled) return
+        if (index < 0 || index >= this.itemsCount) return
+        if (this.isLinear && index > this.currentIndex + 1) return
+
+        const oldIndex = this.currentIndex
+        this.currentIndex = 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
+
+        if (index > oldIndex) {
+          this.dispatchEvent(new CustomEvent('next', { detail: { index, value: itemVal } }))
+        } else if (index < oldIndex) {
+          this.dispatchEvent(new CustomEvent('prev', { detail: { index, value: itemVal } }))
+        }
+        this.dispatchEvent(new CustomEvent('change', { detail: { index, value: itemVal } }))
+      }
+
+      private updateState() {
+        const items = this.querySelectorAll('[data-slot="item"]')
+        items.forEach((itemNode) => {
+          const item = itemNode as HTMLElement
+          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)
+
+          const state = isCompleted ? "completed" : isActive ? "active" : "inactive"
+          item.setAttribute('data-state', state)
+
+          if (isDisabled) {
+            item.setAttribute('data-disabled', 'true')
+          } else {
+            item.removeAttribute('data-disabled')
+          }
+
+          const trigger = item.querySelector('button[data-step-trigger]') as HTMLButtonElement | null
+          if (trigger) {
+            trigger.disabled = isDisabled
+            if (isActive || isCompleted) {
+              trigger.classList.add('!bg-primary-600', '!border-primary-600', '!text-white')
+            } else {
+              trigger.classList.remove('!bg-primary-600', '!border-primary-600', '!text-white')
+            }
+          }
+
+          const icon = item.querySelector('[data-slot="icon"]') as HTMLElement | null
+          if (icon) {
+            if (isActive || isCompleted) {
+              icon.classList.add('!text-white')
+              icon.classList.remove('text-neutral-400')
+            } else {
+              icon.classList.remove('!text-white')
+              icon.classList.add('text-neutral-400')
+            }
+          }
+
+          const separators = this.querySelectorAll('[data-slot="separator"]')
+          separators.forEach((sepNode) => {
+            const sep = sepNode as HTMLElement
+            const sepIdx = Number(sep.dataset.separatorIndex)
+            if (sepIdx < this.currentIndex) {
+              sep.classList.add('!bg-primary-600')
+              sep.classList.remove('bg-neutral-200')
+            } else {
+              sep.classList.remove('!bg-primary-600')
+              sep.classList.add('bg-neutral-200')
+            }
+          })
+        })
+
+        const panels = this.querySelectorAll('[data-stepper-panel]')
+        panels.forEach((panelNode) => {
+          const panel = panelNode as HTMLElement
+          const idx = Number(panel.dataset.stepperPanel)
+          if (idx === this.currentIndex) {
+            panel.removeAttribute('hidden')
+          } else {
+            panel.setAttribute('hidden', 'until-found')
+          }
+        })
+      }
+    }
+
+    if (!customElements.get('rla-stepper')) {
+      customElements.define('rla-stepper', RLAStepper)
+    }
+  }
+</script>
+
+<style>
+  @supports not (content-visibility: hidden) {
+    [hidden="until-found"] {
+      display: none !important;
+    }
+  }
+</style>