@rimelight/ui 0.0.32 → 0.0.33

package/src/components/astro/RLADrawer.astro

@@ -1,74 +1,78 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DrawerProps } from "../../types"
-import drawerTheme from "../../themes/drawer.theme"
-
-const drawer = scv(drawerTheme)
-
-const {
-  direction = "bottom",
-  title,
-  description,
-  triggerLabel,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DrawerProps
-
-const classes = resolveClasses(drawer, {
-  direction
-}, useUi("drawer", uiProp), className)
-
-const dialogId = `rla-drawer-${Math.random().toString(36).substring(2, 9)}`
----
-<div class={classes.root} data-slot="drawer-container">
-  {triggerLabel ? (
-    <button
-      class={classes.trigger}
-      data-slot="trigger"
-      type="button"
-      onclick={`document.getElementById('${dialogId}').showModal()`}
-    >
-      {triggerLabel}
-    </button>
-  ) : (
-    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
-      <slot name="trigger" />
-    </span>
-  )}
-
-  <dialog
-    id={dialogId}
-    class={classes.content}
-    data-slot="content"
-    data-close-on-click-outside="true"
-    {...rest}
-  >
-    <div class={classes.handle} data-slot="handle" />
-
-    <button
-      class={classes.closeButton}
-      data-slot="close-button"
-      type="button"
-      onclick={`document.getElementById('${dialogId}').close()`}
-      aria-label="Close drawer"
-    >
-      <span class="i-lucide-x size-4" aria-hidden="true" />
-    </button>
-
-    <div class={classes.header} data-slot="header">
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-      <slot name="title" />
-      
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-      <slot name="description" />
-    </div>
-
-    <slot />
-
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer" />
-    </div>
-  </dialog>
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DrawerProps } from "../../types"
+import drawerThemeDefault, { createDrawerTheme } from "../../themes/drawer.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const drawerTheme = uiConfig.colors ? createDrawerTheme() : drawerThemeDefault
+
+const drawer = scv(drawerTheme)
+
+const {
+  direction = "bottom",
+  title,
+  description,
+  triggerLabel,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DrawerProps
+
+const classes = resolveClasses(drawer, {
+  direction
+}, useUi("drawer", uiProp), className)
+
+const dialogId = `rla-drawer-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="drawer-container">
+  {triggerLabel ? (
+    <button
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').showModal()`}
+    >
+      {triggerLabel}
+    </button>
+  ) : (
+    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={dialogId}
+    class={classes.content}
+    data-slot="content"
+    data-close-on-click-outside="true"
+    {...rest}
+  >
+    <div class={classes.handle} data-slot="handle" />
+
+    <button
+      class={classes.closeButton}
+      data-slot="close-button"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').close()`}
+      aria-label="Close drawer"
+    >
+      <span class="i-lucide-x size-4" aria-hidden="true" />
+    </button>
+
+    <div class={classes.header} data-slot="header">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      <slot name="title" />
+      
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot name="description" />
+    </div>
+
+    <slot />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</div>

package/src/components/astro/RLAEditor.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { EditorProps } from "../../types"
-import editorThemeDefault from "../../themes/editor.theme"
-
-const editor = scv(editorThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as EditorProps
-
-const classes = resolveClasses(editor, {}, useUi("editor", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { EditorProps } from "../../types"
+import editorThemeDefault, { createEditorTheme } from "../../themes/editor.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const editorTheme = uiConfig.colors ? createEditorTheme() : editorThemeDefault
+
+const editor = scv(editorTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as EditorProps
+
+const classes = resolveClasses(editor, {}, useUi("editor", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAEmpty.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { EmptyProps } from "../../types"
-import emptyThemeDefault from "../../themes/empty.theme"
-
-const empty = scv(emptyThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as EmptyProps
-
-const classes = resolveClasses(empty, {}, useUi("empty", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { EmptyProps } from "../../types"
+import emptyThemeDefault, { createEmptyTheme } from "../../themes/empty.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const emptyTheme = uiConfig.colors ? createEmptyTheme() : emptyThemeDefault
+
+const empty = scv(emptyTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as EmptyProps
+
+const classes = resolveClasses(empty, {}, useUi("empty", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAError.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ErrorProps } from "../../types"
-import errorThemeDefault from "../../themes/error.theme"
-
-const error = scv(errorThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ErrorProps
-
-const classes = resolveClasses(error, {}, useUi("error", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ErrorProps } from "../../types"
+import errorThemeDefault, { createErrorTheme } from "../../themes/error.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const errorTheme = uiConfig.colors ? createErrorTheme() : errorThemeDefault
+
+const error = scv(errorTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ErrorProps
+
+const classes = resolveClasses(error, {}, useUi("error", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAFieldset.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FieldsetProps } from "../../types"
-import fieldsetThemeDefault from "../../themes/fieldset.theme"
-
-const fieldset = scv(fieldsetThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as FieldsetProps
-
-const classes = resolveClasses(fieldset, {}, useUi("fieldset", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FieldsetProps } from "../../types"
+import fieldsetThemeDefault, { createFieldsetTheme } from "../../themes/fieldset.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const fieldsetTheme = uiConfig.colors ? createFieldsetTheme() : fieldsetThemeDefault
+
+const fieldset = scv(fieldsetTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FieldsetProps
+
+const classes = resolveClasses(fieldset, {}, useUi("fieldset", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAFloatingAction.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FloatingActionProps } from "../../types"
-import floatingActionThemeDefault from "../../themes/floating-action.theme"
-
-const floatingAction = scv(floatingActionThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as FloatingActionProps
-
-const classes = resolveClasses(floatingAction, {}, useUi("floatingAction", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FloatingActionProps } from "../../types"
+import floatingActionThemeDefault, { createFloatingActionTheme } from "../../themes/floating-action.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const floatingActionTheme = uiConfig.colors ? createFloatingActionTheme() : floatingActionThemeDefault
+
+const floatingAction = scv(floatingActionTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FloatingActionProps
+
+const classes = resolveClasses(floatingAction, {}, useUi("floatingAction", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAFooter.astro

@@ -1,35 +1,39 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FooterProps } from "../../types"
-import footerTheme from "../../themes/footer.theme"
-
-const footer = scv(footerTheme)
-
-const {
-  contain = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as FooterProps
-
-const classes = resolveClasses(footer, { contain }, useUi("footer", uiProp), className)
----
-
-<footer
-  class:list={[classes.root]}
-  data-slot="root"
-  {...rest}
->
-  <div class:list={[classes.container]}>
-    <div class:list={[classes.left]} data-slot="left">
-      <slot name="left" />
-    </div>
-    <div class:list={[classes.center]} data-slot="center">
-      <slot name="center" />
-    </div>
-    <div class:list={[classes.right]} data-slot="right">
-      <slot name="right" />
-    </div>
-  </div>
-</footer>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FooterProps } from "../../types"
+import footerThemeDefault, { createFooterTheme } from "../../themes/footer.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const footerTheme = uiConfig.colors ? createFooterTheme() : footerThemeDefault
+
+const footer = scv(footerTheme)
+
+const {
+  contain = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FooterProps
+
+const classes = resolveClasses(footer, { contain }, useUi("footer", uiProp), className)
+---
+
+<footer
+  class:list={[classes.root]}
+  data-slot="root"
+  {...rest}
+>
+  <div class:list={[classes.container]}>
+    <div class:list={[classes.left]} data-slot="left">
+      <slot name="left" />
+    </div>
+    <div class:list={[classes.center]} data-slot="center">
+      <slot name="center" />
+    </div>
+    <div class:list={[classes.right]} data-slot="right">
+      <slot name="right" />
+    </div>
+  </div>
+</footer>

package/src/components/astro/RLAForm.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FormProps } from "../../types"
-import formThemeDefault from "../../themes/form.theme"
-
-const form = scv(formThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as FormProps
-
-const classes = resolveClasses(form, {}, useUi("form", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FormProps } from "../../types"
+import formThemeDefault, { createFormTheme } from "../../themes/form.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const formTheme = uiConfig.colors ? createFormTheme() : formThemeDefault
+
+const form = scv(formTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FormProps
+
+const classes = resolveClasses(form, {}, useUi("form", uiProp), className);
+---
+<form class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</form>

package/src/components/astro/RLAGallery.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { GalleryProps } from "../../types"
-import galleryThemeDefault from "../../themes/gallery.theme"
-
-const gallery = scv(galleryThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as GalleryProps
-
-const classes = resolveClasses(gallery, {}, useUi("gallery", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { GalleryProps } from "../../types"
+import galleryThemeDefault, { createGalleryTheme } from "../../themes/gallery.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const galleryTheme = uiConfig.colors ? createGalleryTheme() : galleryThemeDefault
+
+const gallery = scv(galleryTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as GalleryProps
+
+const classes = resolveClasses(gallery, {}, useUi("gallery", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAGrid.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+  stagger?: boolean
+  class?: string
+}
+
+const { stagger = false, class: className = "", ...rest } = Astro.props
+---
+
+<div class:list={["rl-grid", { stagger }, className]} {...rest}>
+  <slot />
+</div>
+
+<style>
+  .rl-grid {
+    display: grid;
+    grid-template-columns: 100%;
+    gap: 1rem;
+  }
+
+  .rl-grid > :global(*) {
+    margin-top: 0 !important;
+  }
+
+  @media (min-width: 50rem) {
+    .rl-grid {
+      grid-template-columns: 1fr 1fr;
+      gap: 1.5rem;
+    }
+    .stagger {
+      --stagger-height: 5rem;
+      padding-bottom: var(--stagger-height);
+    }
+
+    .stagger > :global(*):nth-child(2n) {
+      transform: translateY(var(--stagger-height));
+    }
+  }
+</style>

package/src/components/astro/RLAHead.astro

@@ -163,18 +163,34 @@ const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : '
 
 <script is:inline>
   (function() {
-    const stored = localStorage.getItem('theme');
-    if (stored) {
-      if (stored === 'dark') {
-        document.documentElement.classList.add('dark');
+    function getThemeClass() {
+      var stored = localStorage.getItem('theme');
+      if (stored === 'dark') return 'dark';
+      if (stored === 'light') return '';
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '';
+    }
+
+    function applyTheme(doc) {
+      var cls = getThemeClass();
+      if (cls) {
+        doc.documentElement.classList.add('dark');
       } else {
-        document.documentElement.classList.remove('dark');
-      }
-    } else {
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.documentElement.classList.add('dark');
+        doc.documentElement.classList.remove('dark');
       }
     }
+
+    // Apply immediately on initial load
+    applyTheme(document);
+
+    // Apply to incoming document BEFORE the swap — eliminates the flash
+    document.addEventListener('astro:before-swap', function(e) {
+      applyTheme(e.newDocument);
+    });
+
+    // Safety net: re-apply after swap in case anything overrides it
+    document.addEventListener('astro:after-swap', function() {
+      applyTheme(document);
+    });
   })();
 </script>