@rimelight/ui 0.0.42 → 0.0.44

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

@@ -1,13 +1,214 @@
-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 bg-neutral-100 border border-neutral-300 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 group-data-[state=completed]:text-primary-600 text-neutral-400 transition-colors",
+    description: "text-neutral-500 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-950 group-data-[state=completed]:border-neutral-950 group-data-[state=active]:bg-neutral-950 group-data-[state=active]:border-neutral-950",
+        icon: "group-data-[state=completed]:text-neutral-50 group-data-[state=active]:text-neutral-50",
+        separator: "group-data-[state=completed]:bg-neutral-950"
+      }
+    }
+  },
+  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}>
@@ -60,8 +54,8 @@ const classes = resolveClasses(steps, { size }, useUi("steps", uiProp), classNam
     font-size: 0.75rem;
     font-weight: 700;
     line-height: 1;
-    color: var(--color-primary-foreground, #fff);
-    background-color: var(--color-primary, #3b82f6);
+    color: var(--rl-neutral-50);
+    background-color: var(--primary, #3b82f6);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     z-index: 1;
   }
@@ -73,7 +67,7 @@ const classes = resolveClasses(steps, { size }, useUi("steps", uiProp), classNam
     top: calc(1.75rem + 0.375rem);
     bottom: 0;
     width: 2px;
-    background-color: var(--color-border, #e5e7eb);
+    background-color: var(--rl-neutral-200);
   }
 
   .rl-steps-list > li:last-child::after {

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: {}
+})

package/src/components/sticky-surface/RLAStickySurface.astro

@@ -1,38 +1,67 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { StickySurfaceProps } from "./sticky-surface"
-import { resolveTheme } from "../../utils/resolveTheme"
-import stickySurfaceThemeDefault, { createStickySurfaceTheme } from "./sticky-surface.theme"
-const stickySurfaceTheme = resolveTheme(stickySurfaceThemeDefault, createStickySurfaceTheme)
-
-
-const stickySurface = scv(stickySurfaceTheme)
-
-const {
-  offsetTop = 0,
-  zIndex = 10,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as StickySurfaceProps
-
-const classes = resolveClasses(stickySurface, {}, useUi("stickySurface", uiProp), className)
-const topOffset = `${offsetTop}px`
-const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
----
-<div
-  class:list={[classes.root, id]}
-  data-slot="root"
-  {...rest}
->
-  <slot />
-</div>
-
-<style is:inline set:html={`
-  .${id} {
-    top: ${topOffset} !important;
-    z-index: ${zIndex} !important;
-  }
-`} />
+---
+import type { StickySurfaceProps } from "./sticky-surface"
+import { stickySurfaceTheme } from "./sticky-surface.theme"
+
+
+
+const {
+  offsetTop = 0,
+  zIndex = 10,
+  stuckShadow = true,
+  ...rest
+} = Astro.props as StickySurfaceProps
+
+
+
+const classes = stickySurfaceTheme(Astro.props)
+const topOffset = `${offsetTop}px`
+const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
+---
+<div
+  class:list={[classes.root, id, stuckShadow && "rla-sticky-shadow"]}
+  data-slot="root"
+  {...rest}
+>
+  <slot />
+</div>
+
+<style is:inline set:html={`
+  .${id} {
+    top: ${topOffset} !important;
+    z-index: ${zIndex} !important;
+    /*
+     * CSS scroll-state(stuck: top) — Chrome 133+
+     *
+     * Declare this element as a scroll-state container so it can query
+     * its own stuck state. When position: sticky causes it to be pinned
+     * at the top, the browser marks it as "stuck: top".
+     */
+    container-type: scroll-state;
+    container-name: rla-sticky-${id};
+  }
+`} />
+
+<!--
+  The stuck shadow is applied via a nested CSS @container scroll-state rule.
+  This is progressive enhancement — browsers that don't support scroll-state()
+  silently ignore it and the surface just has no shadow (which is fine).
+-->
+{stuckShadow && (
+  <style is:inline set:html={`
+    @container rla-sticky-${id} scroll-state(stuck: top) {
+      .${id} {
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      @container rla-sticky-${id} scroll-state(stuck: top) {
+        .${id} {
+          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.40), 0 1px 4px 0 rgba(0, 0, 0, 0.20);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+        }
+      }
+    }
+  `} />
+)}

package/src/components/sticky-surface/sticky-surface.theme.ts

@@ -1,12 +1,8 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createStickySurfaceTheme = (_colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: "sticky top-0 self-start transition-all duration-300"
-    }
-  })
-
-export default createStickySurfaceTheme()
+export const stickySurfaceTheme = defineTheme("sticky-surface", {
+  slots: ["root"],
+  base: {
+    root: "sticky top-0 self-start transition-all duration-300"
+  }
+})

package/src/components/sticky-surface/sticky-surface.ts

@@ -1,4 +1,5 @@
 export interface StickySurfaceProps {
+  stuckShadow?: boolean
   /**
    * Pixels offset from top when sticky.
    */

package/src/components/surround/RLASurround.astro

@@ -14,13 +14,13 @@ import RLAIcon from "../icon/RLAIcon.astro"
 ---
 
 {(prev || next) && (
-  <div class="mt-12 pt-6 border-t border-border flex justify-between gap-4">
+  <div class="mt-12 pt-6 border-t border-default flex justify-between gap-4">
     {prev ? (
       <a href={prev.href} class="flex flex-col gap-1 text-left group no-underline max-w-[45%]">
-        <span class="text-xs text-muted-foreground font-medium flex items-center gap-1 group-hover:text-primary transition-colors">
+        <span class="text-xs text-muted font-medium flex items-center gap-1 group-hover:text-primary transition-colors">
           <RLAIcon name="arrowLeft" class="size-3" /> Previous
         </span>
-        <span class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
+        <span class="text-sm font-semibold text-highlighted group-hover:text-primary transition-colors truncate">
           {prev.label}
         </span>
       </a>
@@ -28,10 +28,10 @@ import RLAIcon from "../icon/RLAIcon.astro"
 
     {next ? (
       <a href={next.href} class="flex flex-col gap-1 text-right group no-underline max-w-[45%]">
-        <span class="text-xs text-muted-foreground font-medium flex items-center justify-end gap-1 group-hover:text-primary transition-colors">
+        <span class="text-xs text-muted font-medium flex items-center justify-end gap-1 group-hover:text-primary transition-colors">
           Next <RLAIcon name="arrowRight" class="size-3" />
         </span>
-        <span class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
+        <span class="text-sm font-semibold text-highlighted group-hover:text-primary transition-colors truncate">
           {next.label}
         </span>
       </a>

package/src/components/switch/RLASwitch.astro

@@ -1,36 +1,21 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { SwitchProps } from "./switch"
-import { resolveTheme } from "../../utils/resolveTheme"
-import switchThemeDefault, { createSwitchTheme } from "./switch.theme"
-const switchTheme = resolveTheme(switchThemeDefault, createSwitchTheme)
+import { switchTheme } from "./switch.theme"
 
 
-const switchFn = scv(switchTheme)
 
 const {
   checked = false,
   disabled = false,
   name,
   label,
-  color = "primary",
-  size = "md",
   theme,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as SwitchProps
 
-const classes = resolveClasses(switchFn, {
-  color,
-  size,
-  checked,
-  theme
-}, useUi("switch", uiProp), className);
+const classes = switchTheme(Astro.props);
 ---
-<label class={classes.root} data-slot="root">
+<label class={classes.root} data-slot="root" data-theme={theme}>
   <input
     type="checkbox"
     class={classes.input}

package/src/components/switch/switch.theme.ts

@@ -1,66 +1,51 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSwitchTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "input", "track", "thumb", "label"],
-    base: {
-      root: "inline-flex items-center gap-2 cursor-pointer select-none",
-      input: "absolute opacity-0 size-0 pointer-events-none peer",
-      track: [
-        "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-      ],
-      thumb:
-        "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
-      label: "text-sm text-foreground leading-none"
+export const switchTheme = defineTheme("switch", {
+  slots: ["root", "input", "track", "thumb", "label"],
+  base: {
+    root: "inline-flex items-center gap-2 cursor-pointer select-none",
+    input: "absolute opacity-0 size-0 pointer-events-none peer",
+    track: [
+      "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-[var(--rl-ring)]/50 focus-within:ring-offset-2",
+      "peer-checked:bg-[var(--rl-bg)]",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+    ],
+    thumb:
+      "pointer-events-none block size-4 rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 translate-x-0",
+    label: "text-sm text-highlighted leading-none"
+  },
+  variants: {
+    color: "auto",
+    size: {
+      sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
+      md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
+      lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
     },
-    variants: {
-      color: Object.fromEntries(
-        colors.map((color) => [
-          color,
-          {
-            root: "rl-color-" + color,
-            track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
-          }
-        ])
-      ),
-      size: {
-        sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
-        md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
-        lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
-      },
-      checked: {
-        true: { thumb: "translate-x-full" },
-        false: { thumb: "translate-x-0" }
-      },
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
-      }
+    checked: {
+      true: { thumb: "translate-x-full" },
+      false: { thumb: "translate-x-0" }
+    }
+  },
+  compoundVariants: [
+    {
+      size: "sm",
+      checked: true,
+      classNames: { thumb: "translate-x-3" }
     },
-    compoundVariants: [
-      {
-        size: "sm",
-        checked: true,
-        classNames: { thumb: "translate-x-3" }
-      },
-      {
-        size: "md",
-        checked: true,
-        classNames: { thumb: "translate-x-4" }
-      },
-      {
-        size: "lg",
-        checked: true,
-        classNames: { thumb: "translate-x-5" }
-      }
-    ],
-    defaultVariants: {
-      color: "primary",
+    {
       size: "md",
-      checked: false
+      checked: true,
+      classNames: { thumb: "translate-x-4" }
+    },
+    {
+      size: "lg",
+      checked: true,
+      classNames: { thumb: "translate-x-5" }
     }
-  })
-
-export default createSwitchTheme()
+  ],
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    checked: false
+  }
+})

package/src/components/switch/switch.ts

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