@rimelight/ui 0.0.24 → 0.0.25

package/src/components/astro/RLAFooter.astro

@@ -1,35 +1,16 @@
 ---
-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 } 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.
-   */
+  contain?: FooterVariants['contain'];
+  ui?: Partial<Record<string, string>>;
   class?: string;
-  /**
-   * Standard HTML attributes for <footer>
-   */
   [key: string]: unknown;
 }
 
@@ -40,29 +21,22 @@ const {
   ...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)]}
+  class:list={[classes.root]}
   data-slot="rla-footer"
   {...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="footer-left">
       <slot name="left" />
     </div>
-    <div class:list={[twMerge(center, mergedUI.center)]} data-slot="footer-center">
+    <div class:list={[classes.center]} data-slot="footer-center">
       <slot name="center" />
     </div>
-    <div class:list={[twMerge(right, mergedUI.right)]} data-slot="footer-right">
+    <div class:list={[classes.right]} data-slot="footer-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 } 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.
-   */
+  ui?: Partial<Record<string, string>>;
   class?: string;
-  /**
-   * Standard HTML attributes for <header>.
-   */
   [key: string]: unknown;
 }
 
@@ -68,69 +29,48 @@ const {
   ...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)]}
+  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="header-left">
         <slot name="left" />
       </div>
-      <div class:list={[twMerge(center, mergedUI.center)]} data-slot="header-center">
+      <div class:list={[classes.center]} data-slot="header-center">
         <slot name="center" />
       </div>
-      <div class:list={[twMerge(right, mergedUI.right)]} data-slot="header-right">
+      <div class:list={[classes.right]} data-slot="header-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,36 +1,17 @@
 ---
-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 } 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.
-   */
+  size?: IconVariants['size']
   class?: string
-  /**
-   * UI overrides for individual slots.
-   */
-  ui?: Partial<Record<keyof typeof iconTheme.base, string>>
+  ui?: Partial<Record<string, string>>
   [key: string]: unknown
 }
 
@@ -42,20 +23,14 @@ const {
   ...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)}
+  class={classes.root}
   data-slot="rla-icon"
   aria-hidden="true"
   {...rest}
 >
+  <span class={name} />
 </span>

package/src/components/astro/RLALogo.astro

@@ -1,48 +1,18 @@
 ---
-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 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.
-   */
+  ui?: Partial<Record<string, string>>;
   class?: string;
-  /**
-   * The alt text for the logo image.
-   */
   alt?: string;
-  /**
-   * Standard HTML attributes for <a>
-   */
   [key: string]: unknown;
 }
 
@@ -56,16 +26,11 @@ const {
   ...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,7 +47,7 @@ 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"

package/src/components/astro/RLAPlaceholder.astro

@@ -1,31 +1,13 @@
 ---
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { placeholderTheme } from "../../themes/placeholder.theme.ts"
-import { getUIConfig } from "virtual:rimelight-ui"
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import placeholderTheme from "../../themes/placeholder.theme"
 
-const placeholder = scv({
-  slots: [...placeholderTheme.slots],
-  base: placeholderTheme.base,
-  variants: placeholderTheme.variants,
-  compoundVariants: [...placeholderTheme.compoundVariants],
-  defaultVariants: placeholderTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
+const placeholder = scv(placeholderTheme)
 
 export interface RLAPlaceholderProps {
-  /**
-   * UI overrides for individual slots, derived from the placeholder theme.
-   */
-  ui?: Partial<Record<keyof typeof placeholderTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
+  ui?: Partial<Record<string, string>>
   class?: string
-  /**
-   * Standard HTML attributes.
-   */
   [key: string]: unknown
 }
 
@@ -35,18 +17,11 @@ const {
   ...rest
 } = Astro.props as RLAPlaceholderProps
 
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.placeholder as Record<string, unknown>) ?? {}
-) as Record<keyof typeof placeholderTheme.base, string | undefined>
-
-const { base, svg } = placeholder()
+const classes = resolveClasses(placeholder, {}, useUi("placeholder", uiProp), className)
 ---
 
-<div class={twMerge(base, mergedUI.base, className)} {...rest}>
-  <svg class={twMerge(svg, mergedUI.svg)}>
+<div class={classes.base} {...rest}>
+  <svg class={classes.svg}>
     <defs>
       <pattern
         id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"

package/src/components/astro/RLAQuote.astro

@@ -0,0 +1,15 @@
+---
+
+---
+
+<figure class="relative my-8 border-y-[3px] border-astro-gray-500 py-4">
+    <span class="i-lucide-quote mb-2 s-10 md:absolute md:right-[calc(100%+1rem)] md:top-6" />
+    <blockquote
+            class="font-heading heading-3 text-xl font-medium text-white md:text-[32px] md:leading-[40px]"
+    >
+        <slot name="quote" />
+    </blockquote>
+    <figcaption class="font-mono mt-4 text-right text-astro-pink-light">
+        <slot name="caption" />
+    </figcaption>
+</figure>