@rimelight/ui 0.0.41 → 0.0.43

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 dark:text-neutral-500"
+                          ]}
+                          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 dark:bg-primary-500" : "bg-neutral-200 dark:bg-neutral-800"
+                ]}
+                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', 'dark:text-neutral-500')
+            } else {
+              icon.classList.remove('!text-white')
+              icon.classList.add('text-neutral-400', 'dark:text-neutral-500')
+            }
+          }
+
+          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', 'dark:!bg-primary-500')
+              sep.classList.remove('bg-neutral-200', 'dark:bg-neutral-800')
+            } else {
+              sep.classList.remove('!bg-primary-600', 'dark:!bg-primary-500')
+              sep.classList.add('bg-neutral-200', 'dark:bg-neutral-800')
+            }
+          })
+        })
+
+        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>

package/src/components/stepper/stepper.theme.ts

@@ -1,13 +1,215 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createStepperTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createStepperTheme()
+export const stepperTheme = defineTheme("stepper", {
+  slots: [
+    "root",
+    "header",
+    "item",
+    "container",
+    "trigger",
+    "indicator",
+    "icon",
+    "separator",
+    "wrapper",
+    "title",
+    "description",
+    "content"
+  ],
+  base: {
+    root: "flex gap-4 w-full",
+    header: "flex justify-between items-start w-full",
+    item: "group flex-1 flex flex-col items-center text-center relative",
+    container: "flex items-center justify-center relative w-full",
+    trigger:
+      "rounded-full font-medium text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:bg-primary-600 group-data-[state=completed]:border-primary-600 group-data-[state=completed]:!text-white group-data-[state=active]:bg-primary-600 group-data-[state=active]:border-primary-600 group-data-[state=active]:!text-white text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 transition-all cursor-pointer z-10",
+    indicator: "flex items-center justify-center size-full text-current",
+    icon: "shrink-0 size-4 text-current transition-colors",
+    separator: "flex-1 h-0.5 mx-2 self-start mt-4 transition-colors rounded-full",
+    wrapper: "mt-2 text-center",
+    title:
+      "text-xs font-semibold group-data-[state=active]:font-bold group-data-[state=active]:text-primary-600 dark:group-data-[state=active]:text-primary-400 group-data-[state=completed]:text-primary-600 dark:group-data-[state=completed]:text-primary-400 text-neutral-400 dark:text-neutral-500 transition-colors",
+    description: "text-neutral-500 dark:text-neutral-400 text-wrap text-xs",
+    content: "size-full"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex-col",
+        header: "flex-row",
+        container: "flex justify-center items-center",
+        separator: "top-1/2 -translate-y-1/2 h-0.5",
+        wrapper: "mt-1.5"
+      },
+      vertical: {
+        header: "flex-col gap-4",
+        item: "flex flex-row text-start items-start gap-3",
+        container: "flex flex-col items-center justify-start h-full",
+        separator: "start-1/2 -translate-x-1/2 w-0.5"
+      }
+    },
+    size: {
+      xs: {
+        trigger: "size-6 text-xs",
+        icon: "size-3",
+        title: "text-xs",
+        description: "text-xs",
+        wrapper: "mt-1"
+      },
+      sm: {
+        trigger: "size-8 text-sm",
+        icon: "size-4",
+        title: "text-xs",
+        description: "text-xs",
+        wrapper: "mt-1.5"
+      },
+      md: {
+        trigger: "size-10 text-base",
+        icon: "size-5",
+        title: "text-sm",
+        description: "text-sm",
+        wrapper: "mt-2"
+      },
+      lg: {
+        trigger: "size-12 text-lg",
+        icon: "size-6",
+        title: "text-base",
+        description: "text-base",
+        wrapper: "mt-2.5"
+      },
+      xl: {
+        trigger: "size-14 text-xl",
+        icon: "size-7",
+        title: "text-lg",
+        description: "text-lg",
+        wrapper: "mt-3"
+      }
+    },
+    color: {
+      primary: {
+        trigger:
+          "group-data-[state=completed]:bg-primary-600 group-data-[state=completed]:border-primary-600 group-data-[state=active]:bg-primary-600 group-data-[state=active]:border-primary-600 group-data-[state=active]:shadow-sm",
+        icon: "group-data-[state=completed]:text-white group-data-[state=active]:text-white",
+        separator: "group-data-[state=completed]:bg-primary-600"
+      },
+      secondary: {
+        trigger:
+          "group-data-[state=completed]:bg-secondary-600 group-data-[state=completed]:border-secondary-600 group-data-[state=active]:bg-secondary-600 group-data-[state=active]:border-secondary-600",
+        icon: "group-data-[state=completed]:text-white group-data-[state=active]:text-white",
+        separator: "group-data-[state=completed]:bg-secondary-600"
+      },
+      success: {
+        trigger:
+          "group-data-[state=completed]:bg-success-500 group-data-[state=completed]:border-success-500 group-data-[state=active]:bg-success-500 group-data-[state=active]:border-success-500",
+        icon: "group-data-[state=completed]:text-white group-data-[state=active]:text-white",
+        separator: "group-data-[state=completed]:bg-success-500"
+      },
+      info: {
+        trigger:
+          "group-data-[state=completed]:bg-info-500 group-data-[state=completed]:border-info-500 group-data-[state=active]:bg-info-500 group-data-[state=active]:border-info-500",
+        icon: "group-data-[state=completed]:text-white group-data-[state=active]:text-white",
+        separator: "group-data-[state=completed]:bg-info-500"
+      },
+      warning: {
+        trigger:
+          "group-data-[state=completed]:bg-warning-500 group-data-[state=completed]:border-warning-500 group-data-[state=active]:bg-warning-500 group-data-[state=active]:border-warning-500",
+        icon: "group-data-[state=completed]:text-white group-data-[state=active]:text-white",
+        separator: "group-data-[state=completed]:bg-warning-500"
+      },
+      error: {
+        trigger:
+          "group-data-[state=completed]:bg-error-500 group-data-[state=completed]:border-error-500 group-data-[state=active]:bg-error-500 group-data-[state=active]:border-error-500",
+        icon: "group-data-[state=completed]:text-white group-data-[state=active]:text-white",
+        separator: "group-data-[state=completed]:bg-error-500"
+      },
+      neutral: {
+        trigger:
+          "group-data-[state=completed]:bg-neutral-900 dark:group-data-[state=completed]:bg-neutral-100 group-data-[state=completed]:border-neutral-900 dark:group-data-[state=completed]:border-neutral-100 group-data-[state=completed]:text-neutral-100 dark:group-data-[state=completed]:text-neutral-900 group-data-[state=active]:bg-neutral-900 dark:group-data-[state=active]:bg-neutral-100 group-data-[state=active]:border-neutral-900 dark:group-data-[state=active]:border-neutral-100 group-data-[state=active]:text-neutral-100 dark:group-data-[state=active]:text-neutral-900",
+        icon: "group-data-[state=completed]:text-neutral-100 dark:group-data-[state=completed]:text-neutral-900 group-data-[state=active]:text-neutral-100 dark:group-data-[state=active]:text-neutral-900",
+        separator:
+          "group-data-[state=completed]:bg-neutral-900 dark:group-data-[state=completed]:bg-neutral-100"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      size: "xs",
+      classNames: {
+        separator: "mt-3"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      classNames: {
+        separator: "mt-4"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      classNames: {
+        separator: "mt-5"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      classNames: {
+        separator: "mt-6"
+      }
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      classNames: {
+        separator: "mt-7"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "xs",
+      classNames: {
+        separator: "top-[24px] bottom-[-16px]",
+        item: "gap-1.5"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      classNames: {
+        separator: "top-[32px] bottom-[-16px]",
+        item: "gap-2"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      classNames: {
+        separator: "top-[40px] bottom-[-16px]",
+        item: "gap-2.5"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      classNames: {
+        separator: "top-[48px] bottom-[-16px]",
+        item: "gap-3"
+      }
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      classNames: {
+        separator: "top-[56px] bottom-[-16px]",
+        item: "gap-3.5"
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "sm",
+    color: "primary",
+    orientation: "horizontal"
+  }
+})

package/src/components/stepper/stepper.ts

@@ -1,11 +1,28 @@
+export interface StepperItem {
+  title?: string
+  description?: string
+  content?: string
+  icon?: string
+  value?: string | number
+  disabled?: boolean
+  slot?: string
+  class?: any
+  ui?: Record<string, any>
+  [key: string]: any
+}
+
 export interface StepperProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
+  items?: StepperItem[]
+  value?: string | number
+  defaultValue?: string | number
+  modelValue?: string | number
+  valueKey?: string
+  linear?: boolean
+  disabled?: boolean
+  orientation?: "horizontal" | "vertical"
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
   ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
   class?: any
   [key: string]: unknown
 }

package/src/components/steps/RLASteps.astro

@@ -1,21 +1,15 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { StepsProps } from "./steps"
-import stepsTheme from "./steps.theme"
+import { stepsTheme } from "./steps.theme"
 
 
-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)
+const classes = stepsTheme(Astro.props)
 ---
 
 <div class:list={[classes.root, "rl-steps"]} data-slot="root" data-size={size} {...rest}>

package/src/components/steps/steps.theme.ts

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