@rimelight/ui 0.0.24 → 0.0.26

package/src/components/astro/RLAButton.astro

@@ -1,118 +1,104 @@
----
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { buttonTheme } from "../../themes/button.theme.ts"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const button = scv({
-  slots: [...buttonTheme.slots],
-  base: buttonTheme.base,
-  variants: buttonTheme.variants,
-  compoundVariants: [...buttonTheme.compoundVariants],
-  defaultVariants: buttonTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args)),
-});
-
-export interface RLAButtonProps {
-  variant?: keyof typeof buttonTheme.variants.variant;
-  color?: keyof typeof buttonTheme.variants.color;
-  size?: keyof typeof buttonTheme.variants.size;
-  href?: string;
-  label?: string;
-  leadingIcon?: string;
-  trailingIcon?: string;
-  loading?: boolean;
-  square?: boolean;
-  block?: boolean;
-  active?: boolean;
-  activeColor?: keyof typeof buttonTheme.variants.color;
-  activeVariant?: keyof typeof buttonTheme.variants.variant;
-  ui?: Partial<Record<string, string>>;
-  class?: string;
-  [key: string]: unknown;
-}
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  class: className,
-  ui: uiProp,
-  href,
-  label,
-  leadingIcon,
-  trailingIcon,
-  loading = false,
-  square = false,
-  block = false,
-  active = false,
-  activeColor,
-  activeVariant,
-  ...rest
-} = Astro.props as RLAButtonProps
-
-const globalConfig = getUIConfig();
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.button as Record<string, unknown>) ?? {},
-) as Record<string, string | undefined>;
-
-const isLeading = (leadingIcon || Astro.slots.has("leading")) || loading
-const isTrailing = (trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
-
-const showLeadingIcon = loading
-  ? "i-lucide-loader-circle"
-  : leadingIcon
-
-const showTrailingIcon = loading
-  ? "i-lucide-loader-circle"
-  : trailingIcon
-
-const leadingClasses = loading ? "animate-spin" : ""
-const trailingClasses = loading ? "animate-spin" : ""
-
-const resolved = button({
-  variant: active && activeVariant ? activeVariant : variant,
-  color: active && activeColor ? activeColor : color,
-  size,
-  block,
-  square: square || (!label && !Astro.slots.has("default")),
-  leading: isLeading,
-  trailing: isTrailing,
-  loading,
-  active
-});
-
-const Tag = href ? "a" : "button";
----
-<Tag
-  class={twMerge(resolved.root, mergedUI.root, className)}
-  data-slot="rla-button"
-  {...(Tag === "a" ? { href } : {})}
-  {...rest}
->
-  <slot name="leading" {...{ ui: resolved }}>
-    {isLeading && (
-      <span class={twMerge(resolved.leadingIcon, mergedUI.leadingIcon)} data-slot="leading-icon">
-        <span class={twMerge(showLeadingIcon, leadingClasses)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-
-  {label !== undefined && label !== null && (
-    <span class={twMerge(resolved.label, mergedUI.label)} data-slot="label">
-      {label}
-    </span>
-  )}
-  {!label && <slot />}
-
-  <slot name="trailing" {...{ ui: resolved }}>
-    {isTrailing && (
-      <span class={twMerge(resolved.trailingIcon, mergedUI.trailingIcon)} data-slot="trailing-icon">
-        <span class={twMerge(showTrailingIcon, trailingClasses)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-</Tag>
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import buttonTheme from "../../themes/button.theme"
+
+const button = scv(buttonTheme)
+type ButtonVariants = ComponentVariants<typeof buttonTheme>
+
+export interface RLAButtonProps {
+  variant?: ButtonVariants['variant'];
+  color?: ButtonVariants['color'];
+  size?: ButtonVariants['size'];
+  href?: string;
+  label?: string;
+  leadingIcon?: string;
+  trailingIcon?: string;
+  loading?: boolean;
+  square?: boolean;
+  block?: boolean;
+  active?: boolean;
+  activeColor?: ButtonVariants['color'];
+  activeVariant?: ButtonVariants['variant'];
+  ui?: ComponentSlots<typeof buttonTheme>;
+  class?: any;
+  [key: string]: unknown;
+}
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RLAButtonProps
+
+const isLeading = !!(leadingIcon || Astro.slots.has("leading")) || loading
+const isTrailing = !!(trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
+
+const showLeadingIcon = loading
+  ? "i-lucide-loader-circle"
+  : leadingIcon
+
+const showTrailingIcon = loading
+  ? "i-lucide-loader-circle"
+  : trailingIcon
+
+const leadingIconClass = loading ? "animate-spin" : ""
+const trailingIconClass = loading ? "animate-spin" : ""
+
+const classes = resolveClasses(button, {
+  variant: active && activeVariant ? activeVariant : variant,
+  color: active && activeColor ? activeColor : color,
+  size,
+  block,
+  square: square || (!label && !Astro.slots.has("default")),
+  leading: isLeading,
+  trailing: isTrailing,
+  loading,
+  active
+}, useUi("button", uiProp), className);
+
+const Tag = href ? "a" : "button";
+---
+<Tag
+  class={classes.root}
+  data-slot="root"
+  {...(Tag === "a" ? { href } : {})}
+  {...rest}
+>
+  <slot name="leading" {...{ ui: classes }}>
+    {isLeading && (
+      <span class={classes.leadingIcon} data-slot="leading-icon">
+        <span class={cx(showLeadingIcon, leadingIconClass)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+
+  <slot name="trailing" {...{ ui: classes }}>
+    {isTrailing && (
+      <span class={classes.trailingIcon} data-slot="trailing-icon">
+        <span class={cx(showTrailingIcon, trailingIconClass)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+</Tag>

package/src/components/astro/RLAFooter.astro

@@ -1,68 +1,42 @@
 ---
-import { scv, cx } from "css-variants";
-import { twMerge } from "tailwind-merge";
-import defu from "defu";
-import { footerTheme } from "../../themes/footer.theme.ts";
-import { getUIConfig } from "virtual:rimelight-ui";
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import footerTheme from "../../themes/footer.theme"
 
-const footer = scv({
-  slots: [...footerTheme.slots],
-  base: footerTheme.base,
-  variants: footerTheme.variants,
-  defaultVariants: footerTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args)),
-});
+const footer = scv(footerTheme)
+type FooterVariants = ComponentVariants<typeof footerTheme>
 
 export interface RLAFooterProps {
-  /**
-   * Whether to contain the footer content in a max-width container.
-   * @default false
-   */
-  contain?: boolean;
-  /**
-   * UI overrides for individual slots, derived from the footer theme.
-   */
-  ui?: Partial<Record<keyof typeof footerTheme.base, string>>;
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string;
-  /**
-   * Standard HTML attributes for <footer>
-   */
+  contain?: FooterVariants['contain'];
+  ui?: ComponentSlots<typeof footerTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 
 const {
   contain = false,
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAFooterProps
 
-const globalConfig = getUIConfig();
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.footer as Record<string, unknown>) ?? {},
-) as Record<keyof typeof footerTheme.base, string | undefined>;
-
-const { root, container, left, center, right } = footer({ contain });
+const classes = resolveClasses(footer, { contain }, useUi("footer", uiProp), className)
 ---
 
 <footer
-  class:list={[twMerge(root, mergedUI.root, className)]}
-  data-slot="rla-footer"
+  class:list={[classes.root]}
+  data-slot="root"
   {...rest}
 >
-  <div class:list={[twMerge(container, mergedUI.container)]}>
-    <div class:list={[twMerge(left, mergedUI.left)]} data-slot="footer-left">
+  <div class:list={[classes.container]}>
+    <div class:list={[classes.left]} data-slot="left">
       <slot name="left" />
     </div>
-    <div class:list={[twMerge(center, mergedUI.center)]} data-slot="footer-center">
+    <div class:list={[classes.center]} data-slot="center">
       <slot name="center" />
     </div>
-    <div class:list={[twMerge(right, mergedUI.right)]} data-slot="footer-right">
+    <div class:list={[classes.right]} data-slot="right">
       <slot name="right" />
     </div>
   </div>

package/src/components/astro/RLAHeader.astro

@@ -1,59 +1,20 @@
 ---
-import { scv, cx } from "css-variants";
-import { twMerge } from "tailwind-merge";
-import defu from "defu";
-import { headerTheme } from "../../themes/header.theme.ts";
-import { getUIConfig } from "virtual:rimelight-ui";
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import headerTheme from "../../themes/header.theme"
 
-const header = scv({
-  slots: [...headerTheme.slots],
-  base: headerTheme.base,
-  variants: headerTheme.variants,
-  defaultVariants: headerTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args)),
-});
+const header = scv(headerTheme)
+type HeaderVariants = ComponentVariants<typeof headerTheme>
 
 export interface RLAHeaderProps {
-  /**
-   * Whether to contain the header content in a max-width container.
-   * @default true
-   */
-  contain?: boolean;
-  /**
-   * Sticky positioning when `fixed` is false.
-   * @default true
-   */
-  sticky?: boolean;
-  /**
-   * Switches to `position: fixed; left: 0; right: 0` (layer mode).
-   * When true, `stackIndex` controls the exact position and layer order.
-   * A module `<script>` is emitted to apply styles and attach scroll listeners.
-   * @default false
-   */
-  fixed?: boolean;
-  /**
-   * Controls z-index when `fixed` is true: `z-index = 100 - stackIndex`.
-   * @default 0
-   */
+  contain?: HeaderVariants['contain'];
+  sticky?: HeaderVariants['sticky'];
+  fixed?: HeaderVariants['fixed'];
   stackIndex?: number;
-  /**
-   * When true, hides the header on scroll-down and shows it on scroll-up.
-   * Implemented via a bundled Astro `<script>` — no Vue hydration needed.
-   * Only meaningful when `fixed` is true.
-   * @default false
-   */
   hideOnScroll?: boolean;
-  /**
-   * UI overrides for individual slots, derived from the header theme.
-   */
-  ui?: Partial<Record<keyof typeof headerTheme.base, string>>;
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string;
-  /**
-   * Standard HTML attributes for <header>.
-   */
+  ui?: ComponentSlots<typeof headerTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 
@@ -63,74 +24,54 @@ const {
   fixed = false,
   stackIndex = 0,
   hideOnScroll = false,
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAHeaderProps;
 
-const globalConfig = getUIConfig();
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.header as Record<string, unknown>) ?? {},
-) as Record<keyof typeof headerTheme.base, string | undefined>;
-
-// Resolve classes — note: sticky variant is suppressed when fixed is true,
-// since the fixed variant's classes replace it.
-const { root, content, container, left, center, right } = header({
+const classes = resolveClasses(header, {
   contain,
   sticky: fixed ? false : sticky,
   fixed,
-});
+}, useUi("header", uiProp), className);
 
-// Build a unique ID so the script can target this specific header element.
 const headerId = `rla-header-${Math.random().toString(36).slice(2, 8)}`;
 const zIndex = 100 - stackIndex;
 ---
 
 <header
   id={headerId}
-  class:list={[twMerge(root, mergedUI.root, className)]}
+  data-slot="root"
+  class:list={[classes.root]}
   data-rla-header={fixed ? "true" : undefined}
   data-stack-index={stackIndex}
   data-hide-on-scroll={String(hideOnScroll)}
   style={fixed ? `z-index: ${zIndex};` : undefined}
   {...rest}
 >
-  <!--
-    content wrapper: present in all modes; in fixed+hideOnScroll mode the inline
-    script observes this element's offsetHeight for accurate measurement.
-  -->
-  <div class:list={[twMerge(content, mergedUI.content)]} data-header-content>
-    <div class:list={[twMerge(container, mergedUI.container)]}>
-      <div class:list={[twMerge(left, mergedUI.left)]} data-slot="header-left">
+  <div class:list={[classes.content]} data-header-content>
+    <div class:list={[classes.container]}>
+      <div class:list={[classes.left]} data-slot="left">
         <slot name="left" />
       </div>
-      <div class:list={[twMerge(center, mergedUI.center)]} data-slot="header-center">
+      <div class:list={[classes.center]} data-slot="center">
         <slot name="center" />
       </div>
-      <div class:list={[twMerge(right, mergedUI.right)]} data-slot="header-right">
+      <div class:list={[classes.right]} data-slot="right">
         <slot name="right" />
       </div>
     </div>
   </div>
 </header>
 
-{/*
-  Astro Module Script — automatically hydrates all static Astro headers 
-  with the global Vanilla JS stack manager. It only executes once per page 
-  load, managing all headers efficiently.
-*/}
 {fixed && (
   <script>
     import { getHeaderStack } from "../../utils/headerStack";
 
-    // This script runs exactly once per page load, managing all Astro headers
     const stack = getHeaderStack();
     const headers = document.querySelectorAll("[data-rla-header='true']");
 
     headers.forEach(header => {
-      // Prevent double-initialization
       if ((header as any)._rl_initialized) return;
       (header as any)._rl_initialized = true;
 

package/src/components/astro/RLAIcon.astro

@@ -1,61 +1,36 @@
 ---
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { iconTheme } from "../../themes/icon.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentVariants, ComponentSlots } from "../../types"
+import iconTheme from "../../themes/icon.theme"
 
-const icon = scv({
-  slots: [...iconTheme.slots],
-  base: iconTheme.base,
-  variants: iconTheme.variants,
-  defaultVariants: iconTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
+const icon = scv(iconTheme)
+type IconVariants = ComponentVariants<typeof iconTheme>
 
 export interface RLAIconProps {
-  /**
-   * Icon name following the UnoCSS icons format.
-   * @example "i-lucide-home"
-   */
   name: string
-  /**
-   * Size variant for the icon.
-   */
-  size?: keyof typeof iconTheme.variants.size
-  /**
-   * External class applied to the root element.
-   */
-  class?: string
-  /**
-   * UI overrides for individual slots.
-   */
-  ui?: Partial<Record<keyof typeof iconTheme.base, string>>
+  size?: IconVariants['size']
+  ui?: ComponentSlots<typeof iconTheme>
+  class?: any
   [key: string]: unknown
 }
 
 const {
   name,
   size = "md",
-  class: className,
   ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLAIconProps
 
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.icon as Record<string, unknown>) ?? {}
-) as Record<keyof typeof iconTheme.base, string | undefined>
-
-const { root } = icon({ size })
+const classes = resolveClasses(icon, { size }, useUi("icon", uiProp), className)
 ---
 
 <span
-  class={twMerge(root, mergedUI.root, className, name)}
-  data-slot="rla-icon"
+  class={classes.root}
+  data-slot="root"
   aria-hidden="true"
   {...rest}
 >
+  <span class={name} />
 </span>

package/src/components/astro/RLALogo.astro

@@ -1,48 +1,19 @@
 ---
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { logoTheme } from "../../themes/logo.theme.ts"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ComponentSlots } from "../../types"
+import logoTheme from "../../themes/logo.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
-const logo = scv({
-  slots: [...logoTheme.slots],
-  base: logoTheme.base,
-  variants: logoTheme.variants,
-  defaultVariants: logoTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args)),
-});
+const logo = scv(logoTheme)
 
 export interface RLALogoProps {
-  /**
-   * The variant of the logo to display.
-   * @default "logomark"
-   */
   variant?: string;
-  /**
-   * Override the color mode.
-   */
   mode?: "color" | "white" | "black";
-  /**
-   * The URL to link to.
-   * @default "/"
-   */
   href?: string;
-  /**
-   * UI overrides for individual slots, derived from the logo theme.
-   */
-  ui?: Partial<Record<keyof typeof logoTheme.base, string>>;
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string;
-  /**
-   * The alt text for the logo image.
-   */
   alt?: string;
-  /**
-   * Standard HTML attributes for <a>
-   */
+  ui?: ComponentSlots<typeof logoTheme>;
+  class?: any;
   [key: string]: unknown;
 }
 
@@ -50,22 +21,17 @@ const {
   variant = "logomark",
   mode,
   href = "/",
-  class: className,
-  ui: uiProp,
   alt,
+  ui: uiProp,
+  class: className,
   ...rest
 } = Astro.props as RLALogoProps;
 
-const globalConfig = getUIConfig();
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.logo as Record<string, unknown>) ?? {},
-) as Record<keyof typeof logoTheme.base, string | undefined>;
-
-const { root } = logo();
+const classes = resolveClasses(logo, {}, useUi("logo", uiProp), className);
 
+const globalConfig = getUIConfig();
 const rcLogos = globalConfig.logos as Record<string, any>;
+
 let logoSrc: string | null = null;
 
 if (rcLogos && typeof rcLogos === "object") {
@@ -82,10 +48,10 @@ const isIcon = logoSrc && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
 ---
 
 <a
-  class={twMerge(root, mergedUI.root, className)}
+  class={classes.root}
   href={href}
   aria-label={alt || variant}
-  data-slot="rla-logo"
+  data-slot="root"
   {...rest}
 >
   {logoSrc ? (